Loading...
Switch is a toggle control used to turn a single option on or off. Commonly used for binary settings—like enabling features or switching modes—it provides immediate, visible feedback to indicate the current state.
Can be controlled or uncontrolled
Full keyboard navigation
Multiple sizes, elastic effect
Animated using Motion
Handles invalid appearance
Easy to customize
Respects reduce motion via system settings and props
There’s an additional SwitchField component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs. It also seamlessly integrates with the latest React 19 features, such as useServerAction:
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
invalid | boolean | ― |
elastic | boolean | ― |
reduceMotion | boolean | false |
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
invalid | boolean | ― |
elastic | boolean | ― |
reduceMotion | boolean | false |
Support all Root Radix API.
Support all Thumb Radix API.