ComponentsToggle
Toggle
A simple toggle switch component
The Toggle component is a simple switch that can be toggled on or off. It is commonly used to enable or disable a feature or setting.
Tip!
Use icon prop to display an icon inside the toggle switch.
Props
The Toggle component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the toggle switch is checked or not |
| onChange | function | Callback function to handle the toggle switch change event | |
| className | string | Custom CSS classes to apply to the toggle switch | |
| label | string | Label text to display next to the toggle switch | |
| labelPosition | string | left | Position of the label relative to the toggle switch ('left' or 'right') |
| color | string | primary | The color scheme of the toggle switch |
| icon | boolean | false | Whether to display an icon inside the toggle switch |
| focus | boolean | false | Whether to apply a focus ring effect when the toggle switch is focused |
| disabled | boolean | false | Whether the toggle switch is disabled or not |
Info
The onChange prop is required to handle the toggle switch change event.