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 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 :
| 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 Radix API
Support all Radix API
// Option #1. Basic usage:
<Switch />
// Option #2. Custom usage:
<SwitchRoot>
<SwitchThumb />
</SwitchRoot>
SwitchFielduseServerAction