Switch

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

Pure UI

Installation

Loading...

Usage

// Option #1. Basic usage:
<Switch />

// Option #2. Custom usage:
<SwitchRoot>
  <SwitchThumb />
</SwitchRoot>

Example

Size

Validation

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:

Elastic

Reduce Motion

API Reference

Switch

PropTypeDefault
size
enum
"default"
invalid
boolean
―
elastic
boolean
―
reduceMotion
boolean
false

Root

PropTypeDefault
size
enum
"default"
invalid
boolean
―
elastic
boolean
―
reduceMotion
boolean
false

Support all Radix API

Thumb

Support all Radix API

⮠ PrevSkeleton
Next ⮡Textarea