Skip to content
Components

Switch

Renders a toggle switch for boolean on/off states.

Usage

import { Switch } from "@instruments/materia-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" }.