Switch
Switch component for toggle controls with full customization
Switch component for toggle controls with full customization
import { Switch } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
size | Optional | ComponentSize | undefined | 'md' | Size variant of the switch |
color | Optional | "success" | "warning" | "error" | "primary" | "default" | undefined | 'default' | Color variant when checked |
radius | Optional | BorderRadius | undefined | 'none' | Border radius variant |
className | Optional | string | undefined | — | Custom className for the root element |
thumbClassName | Optional | string | undefined | — | Custom className for the thumb element |
Usage
Toggle switch built on Radix UI. Controlled or uncontrolled.
Notes
- Pair with a
Label(viahtmlFor/id) for accessibility. - Prefer
Switchfor boolean state where the change applies immediately; useCheckboxfor selections inside a form.
Example
/** * Runnable example for Switch. */import { useState } from 'react'import { Label, Switch } from '@tetherto/mdk-react-devkit'export const SwitchExample = () => { const [enabled, setEnabled] = useState(true) return ( <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <Switch id="notify" checked={enabled} onCheckedChange={setEnabled} /> <Label htmlFor="notify">Enable notifications</Label> </div> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <Switch id="disabled" disabled /> <Label htmlFor="disabled">Disabled</Label> </div> </div> )}