Switch

An on and off control that takes effect the moment it is flipped.

ui.switchcomponents/ui/switch.tsx

Use case

For the AI

Use it for settings that apply at once, with no Save button: Do not disturb, email the client when an invoice is paid, show archived orders, a feature turned on for a team. It sits at the end of a settings row, the setting's name on the left, and the change is saved in `onCheckedChange`.

Use it when

The change applies immediately, with no Save button
A row in a settings list
Turning a notification or a feature on or off

Use something else when

Part of a form that is submitted later: Checkbox
Picking one of several modes, not on or off: Segmented control
On and off inside a menu (Compact Rows): Dropdown menu

Examples

Code

Import

import { useState } from "react"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Usage

export function PaidEmailSetting({ initial, save }: { initial: boolean; save: (on: boolean) => void }) {
  const [on, setOn] = useState(initial)
  return (
    <Label className="flex h-11 cursor-pointer items-center justify-between rounded-[12px] px-3 font-normal text-[14px] text-foreground hover:bg-surface">
      Email the client when an invoice is paid
      <Switch
        checked={on}
        onCheckedChange={(next) => {
          setOn(next)
          save(next)
        }}
      />
    </Label>
  )
}

Rules

A switch applies at once: save in `onCheckedChange`. Inside a form submitted later, use a checkbox.
Its words name the setting in sentence case ("Show previews"), never "On" or "Off".
Wrap the whole row in a `Label`: the row flips it, and the thumb stretches while the row is pressed.
Give it a name: its row's `Label`, or `aria-label` when it stands alone.