Switch Component
A toggle switch component that allows users to turn an option on or off.
- Accessible toggle switch implementation
- Support for labels and descriptions
- Customizable styling
- Disabled state support
Installation
The Switch component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the switch in your project.
React TSX
React TSX
Examples
Basic Switch
Labeled Switch
Disabled Switch
API Reference
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | The checked state of the switch |
defaultChecked | boolean | - | The default checked state |
onCheckedChange | (checked: boolean) => void | - | Event handler called when the checked state changes |
disabled | boolean | false | Whether the switch is disabled |
required | boolean | false | Whether the switch is required |
name | string | - | The name of the switch |
value | string | - | The value of the switch |
className | string | - | Additional CSS classes |