Skip to content
← Inventory

Switch

Renders a toggle switch for boolean on/off states.

Usage

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

Best practices

  • Use Switch for an instantly-applied on/off setting; use Checkbox for opt-ins confirmed by a submit, and RadioGroup for mutually-exclusive choices.

  • Controlled use needs checked + onCheckedChange; with only checked the switch won't move — use defaultChecked for uncontrolled.

  • Switch has no built-in label — associate a Label via htmlFor/id so the toggle has an accessible name.

Props

PropTypeDefaultDescription
sizeResponsiveSize"lg"

Switch size — a single token or a per-breakpoint object like { base: "sm", md: "lg" }.