Switch

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

1  import { Switch, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <Switch />
5  </FlexBox>
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.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius