switch
A control that allows the user to toggle between checked and not checked.
Philosophy
Switches represent immediate, binary state changes — unlike checkboxes, which defer action to a form submission. This semantic distinction matters for UX: a switch should take effect instantly. We support custom SVG indicators so the on/off metaphor can match your design language without sacrificing the accessible role="switch" foundation.
How It's Built
Installation
npx @gentleduck/cli add switch
npx @gentleduck/cli add switch
Usage
import { Switch } from "@/components/ui/switch"import { Switch } from "@/components/ui/switch"<Switch /><Switch />Examples
Form
API Reference
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional class names for the checkbox input |
indicator | React.ReactElement | -- | Custom element for the unchecked state indicator |
checkedIndicator | React.ReactElement | -- | Custom element for the checked state indicator |
onChange | (event: ChangeEvent) => void | -- | Native checkbox change event handler |
onCheckedChange | (checked: boolean) => void | -- | Callback with the new checked boolean when toggled |
ref | React.Ref<HTMLInputElement> | -- | Ref forwarded to the native checkbox input |
style | React.CSSProperties | -- | Inline styles applied to the input element |
...props | React.HTMLProps<HTMLInputElement> | -- | Additional props to spread to the input element |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.
See also
- Checkbox — Multi-selection toggle control
- Radio Group — Single selection from a set of options