Switch

Flip the script with our Switch. A nifty toggle that lets users glide between states

1  import { Switch, Flex } from '@haktos/sugarcoat-ui';
2
3  <Flex gap='3' direction='column' justify='center'>
4    <Switch />
5  </Flex>
6

Component	Description
Switch	Switch, a responsive and colorful element designed to allow users to toggle between two states. This component seamlessly adapts to different sizes and themes, making it a versatile choice for any interactive interface.

Prop	Type	Default	Explanation
`size`	`string`	md	Determines the size of the Switch component. Choose from 'xs', 'sm', 'md', or 'lg' to fit your design needs.
`color`	`string`	default	Sets the theme of the switch. Opt between 'default', 'primary', 'accent', 'success', 'warning', and 'danger' to make the switch more intuitive and in sync with your application's color scheme.
`checked`	`boolean`	false	This prop allows you to control the checked state of the Switch. When 'checked' is true, the Switch is on; when false, it's off. It's handy when you want to control the Switch from a higher-level state.
`defaultChecked`	`boolean`	false	Use this to set the initial checked state of the Switch. It's ideal for cases where you don't need to manage the state dynamically.
`onCheckedChange`	`function`	-	This is a callback function that is triggered whenever the checked state of the Switch changes. It provides you with the new checked value as an argument, helping you react to user interactions.
`name`	`string`		The 'name' prop can be used when the Switch is included within a form. This value will be the key when the form data is submitted.
`value`	`string`		Sets the theme of the switch. Opt between 'default', 'primary', 'accent', 'success', 'warning', and 'danger' to make the switch more intuitive and in sync with your application's color scheme.