Switch
Preview
index.tsx
Preview
index.tsx
Preview
index.tsx
Design Tokens for Switch
| Token | Color for | State/Meaning |
|---|
| --par-color-bg-switch-target-handle | Switch thumb background | Enabled |
| --par-color-bg-switch-target-handle-disabled | Switch thumb background | Disabled |
| --par-color-bg-switch-target-track-uncheck | Switch track background | Unchecked |
| --par-color-bg-switch-target-track-uncheck-disabled | Switch track background | Unchecked Disabled |
| --par-color-bg-switch-target-track-check | Switch track background | Checked |
| --par-color-bg-switch-target-track-check-disabled | Switch track background | Checked Disabled |
| --par-color-border-switch-unchecked | Switch border | Unchecked |
| --par-color-border-switch-checked | Switch border | Checked |
| --par-color-border-switch-unchecked-disabled | Switch border | Unchecked Disabled |
| --par-color-border-switch-checked-disabled | Switch border | Checked Disabled |
| --par-color-text-switch-target-unchecked-enabled | Switch icon | Unchecked |
| --par-color-text-switch-target-checked-enabled | Switch icon | Checked |
| --par-color-text-switch-target-unchecked-disabled | Switch icon | Unchecked Disabled |
| --par-color-text-switch-target-checked-disabled | Switch icon | Checked Disabled |
Switch API Reference
<Switch />
| Prop | Type | Default | Description |
|---|
| active | boolean | | Controlled state |
| defaultActive | boolean | false | Uncontrolled initial state |
| switchSize | 'sm' | 'md' | 'lg' | 'md' | Switch size |
| disabled | boolean | false | Disable the switch |
| icon | boolean | false | Show icon on thumb |
| onToggle | function (active: boolean) | | Callback when value changes |
| ...buttonProps | See MDN | | Inherits all props from native button |
Note: Switch does not inherit Input props. See Button documentation for full details on available props.