Toggle
V 1.0View in Storybook
Switch / toggle with on, off and disabled states.
Playground
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-toggle--playground&viewMode=story&args=checked%3A%21true%3Bdisabled%3A%21false%3Blabel%3AAvailableCode
<Toggle checked disabled={false} label="Available" />Props
| Name | Type | Default |
|---|---|---|
checked | boolean | true |
disabled | boolean | false |
label | string | 'Available' |
Usage guidelines
When to use
- Use for binary settings that take immediate effect — dark mode, notifications, feature flags.
- Always pair with a label that describes the setting being controlled.
- The on state should represent the active, positive condition.
When not to use
- Don't use when the effect is deferred (e.g. requires a save button) — use a Checkbox instead.
- Avoid using Toggle for multi-option selections; use Switches or Radio.
- Don't rely on colour alone to communicate state — the label should reflect it too.