A toggle control that allows users to switch between two states. Uses the native React Native Switch on iOS/Android and a styled Radix UI switch on web.

Installation

npm
yarn
pnpm
bun
npm install @radix-ui/react-switch
Copy

Usage

import { Switch } from "@/components/ui/switch";
Copy

Examples

Basic Switch

A simple toggle switch.

Basic Switch
View Code
Copy

Controlled Switch

Control the switch state with value and onValueChange props.

Controlled Switch
View Code
Copy

Disabled States

Switches can be disabled in either state.

Disabled Switch
View Code
Copy

With Form List

Commonly used within form lists for settings screens.

In Form List
Push Notifications
Email Updates
View Code
Copy

API Reference

Switch

The switch component.

Prop
Type
Default
Description
value
boolean
-
Controlled checked state (React Native style)
onValueChange
(value: boolean) => void
-
Callback when checked state changes (React Native style)
checked
boolean
-
Controlled checked state (Radix style)
onCheckedChange
(checked: boolean) => void
-
Callback when checked state changes (Radix style)
defaultChecked
boolean
-
Initial checked state for uncontrolled usage
disabled
boolean
false
Whether the switch is disabled
required
boolean
-
Whether the switch is required in a form
name
string
-
Name for form submission
className
string
-
CSS classes for styling (web only)

Platform Differences

Native (iOS/Android)

  • Uses React Native's built-in Switch component
  • Renders with native iOS/Android toggle styling
  • Supports native props like trackColor, thumbColor, ios_backgroundColor
  • className prop has no effect

Web

  • Uses Radix UI's Switch primitives
  • Styled with Tailwind CSS to match iOS appearance
  • Full support for className customization
  • Supports both React Native style props (value/onValueChange) and Radix style props (checked/onCheckedChange)
  • Includes focus-visible ring for keyboard navigation

Accessibility

  • Uses proper switch role for screen readers
  • Keyboard accessible: can be toggled with Space key
  • Focus states are clearly visible
  • Native switches inherit platform accessibility features