Component
Switch
A toggle switch. Use it uncontrolled with defaultChecked, or controlled with checked + onChange. Track and knob colors are customizable.
jsx
const [on, setOn] = useState(true);
<Switch checked={on} onChange={setOn} />
<Switch defaultChecked />Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked
|
boolean | — | Controlled state. Omit for uncontrolled use. |
defaultChecked
|
boolean | false | Initial state when uncontrolled. |
onChange
|
(checked) => void | — | Called with the new state on toggle. |
onColor
|
string | '#171717' | Track color when on. |
offColor
|
string | '#e5e5e5' | Track color when off. |
knobOn
|
string | '#ffffff' | Knob color when on. |
knobOff
|
string | '#ffffff' | Knob color when off. |
className
|
string | '' | Extra classes, merged onto the button. |