Switch

Ready

Toggle switches for binary on/off states

Basic Switch

Simple on/off toggle

Controlled Switches

Manage switch state in your component

Receive push notifications on your device

Receive emails about new products and features

Help us improve by sharing usage data

Disabled State

Switches can be disabled

Settings Panel Example

Common use case for switches

Privacy

Notifications

Installation

Install the required dependencies

npm install @radix-ui/react-switch

Usage

Basic implementation example

import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'

export default function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Props

Switch component props

PropTypeDefaultDescription
checkedboolean-Controlled checked state
defaultCheckedbooleanfalseDefault checked state (uncontrolled)
onCheckedChange(checked: boolean) => void-Callback when state changes
disabledbooleanfalseDisable the switch
requiredbooleanfalseMark as required in forms

Features

Built-in functionality

  • Keyboard accessible - Space/Enter to toggle
  • Controlled & uncontrolled - Flexible state management
  • Smooth animation - 200ms slide transition
  • Focus ring - Clear focus indicator
  • Disabled state - Visual and functional disabled support
  • Full border radius - Circular track design