Switch

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

Example

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

API Reference

ComponentDescription
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.

Component Properties

Switch
PropTypeDefaultExplanation
sizestringmd

Determines the size of the Switch component. Choose from 'xs', 'sm', 'md', or 'lg' to fit your design needs.

colorstringdefault

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.

checkedbooleanfalse

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.

defaultCheckedbooleanfalse

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.

onCheckedChangefunction-

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.

namestring

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.

valuestring

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.