Skip to content

Switch

Binary on/off control for settings and preferences. Use when the change takes effect immediately.

Examples

States

Overview

Switch toggles a single setting between on and off. The checked track uses brand-primary. Built on Base UI for accessible keyboard and pointer behavior.

tsx

import { Switch } from "@standard-ui/react"

<label className="flex items-center gap-2">
  <Switch defaultChecked />
  Airplane mode
</label>

Usage

Labeling

Wrap the switch in a label, or pair it with htmlFor / id, so the control has an accessible name.

tsx

<label className="flex items-center gap-2">
  <Switch />
  Notifications
</label>

Disabled

Disabled switches use reduced opacity and cursor-not-allowed. Prefer explaining why a setting is unavailable.

tsx

<Switch disabled defaultChecked />

API

Switch accepts Base UI Switch root props, including controlled and uncontrolled checked state.

PropTypeDefaultDescription
defaultCheckedboolean—Uncontrolled initial checked state.
checkedboolean—Controlled checked state.
onCheckedChange(checked: boolean, event) => void—Called when the checked state changes.
disabledbooleanfalseDisables the switch.

Guidelines

Do

  • Use a switch when toggling takes effect immediately (no separate Save)
  • Label the setting clearly — name the preference, not “On/Off”
  • Prefer a checkbox for multi-select lists or form fields that submit later

Don't

  • Don't use a switch for actions that need confirmation — use a button
  • Don't leave switches unlabeled
  • Don't force cursor-pointer — keep the platform default for controls