Switch

Switches allow users to turn an individual option on or off.

<Switch>
  <SwitchControl />
  <Label>Airplane mode</Label>
</Switch>

Installation

npx shadcn@latest add @dotui/switch

Usage

Use switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows).

import { Label } from '@/components/ui/field'
import { Switch, SwitchControl } from '@/components/ui/switch'
<Switch>
  <SwitchControl />
  <Label>Focus mode</Label>
</Switch>

Anatomy

A Switch wraps a SwitchControl (which auto-renders its SwitchIndicator and SwitchThumb) and a Label. Pass a string child for the label shorthand, or omit children for a standalone control with an aria-label.

import { Label } from '@/components/ui/field'
import {
  Switch,
  SwitchControl,
  SwitchIndicator,
  SwitchThumb,
} from '@/components/ui/switch'

<Switch>
  <SwitchControl>
    <SwitchIndicator>
      <SwitchThumb />
    </SwitchIndicator>
  </SwitchControl>
  <Label>Focus mode</Label>
</Switch>

<Switch>Focus mode</Switch>

<Switch aria-label="Focus mode" />

Value

The switch is on or off. Use defaultSelected for uncontrolled state, or isSelected with onChange to control it.

const [isSelected, setSelected] = React.useState(true)

<Switch isSelected={isSelected} onChange={setSelected}>
  Focus mode
</Switch>

Examples

Basic

In a Card

Settings Panel

Feature Flags

Notification Preferences

Notifications

API Reference

Switch

A switch allows a user to turn a setting on or off.

PropType
"lg" | "md" | "sm"
ReactNode | function
boolean
RefObject<HTMLInputElement | null>
boolean
boolean
boolean
function

SwitchControl

The control element of a switch.

PropType
"lg" | "md" | "sm"
ReactNode | function

SwitchIndicator

The visual track of a switch.

Supports all span attributes.

PropType

SwitchThumb

The visual thumb of a switch.

Supports all span attributes.

PropType

Last updated on 7/7/2026