- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
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';23 <Flex gap='3' direction='column' justify='center'>4 <Switch />5 </Flex>6
API Reference
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. |
Component Properties
Switch
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. |