Toggle
A switch for settings that take effect immediately. Use a checkbox instead when the change needs to be confirmed or submitted.
Values
Thumb is always white for contrast on both tracks.
<Toggle label="Email notifications" defaultChecked />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label text. |
checked / defaultChecked | boolean | — | On or off. |
disabled | boolean | false | Disabled state. |
Usage
Do
- Use for settings that take effect immediately.
Don't
- Use inside forms that need a Submit.