Switch

A control that allows the user to toggle between on and off states.

Installation

import { Switch } from "@gradeui/ui"

Usage

Airplane Mode

Examples

Default Checked

Dark Mode

Disabled

Disabled Off

Disabled On

With Description

Auto-sync

Keep your work in sync across every device.

Props

Prop	Type	Default	Description
checked	boolean	false	The controlled checked state.
defaultChecked	boolean	false	The default checked state when uncontrolled.
onCheckedChange	(checked: boolean) => void	-	Callback when the checked state changes.
disabled	boolean	false	Whether the switch is disabled.
id	string	-	The ID for associating with a label.

Accessibility

Uses native switch role via Radix UI
Keyboard accessible (Space to toggle)
Always pair with a Label for screen readers
Visible focus indicator

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/switch.md and shipped inside the published @gradeui/ui tarball.

---
name: Switch
import: "@gradeui/ui"
props:
  - checked?: boolean
  - onCheckedChange?: (checked: boolean) => void
  - defaultChecked?: boolean
  - disabled?: boolean
  - id?: string
when_to_use: Instant on/off setting ("Enable notifications", "Dark mode"). Commits on toggle — no submit button needed. For selecting-from-a-list use Checkbox.
composes_with: [Label (via htmlFor), Card (settings rows)]
aliases: [toggle, switch, on/off switch, ios toggle, toggle switch, switch control, react native switch]
---

```jsx
<div className="flex items-center justify-between">
  <Label htmlFor="notifications">Email notifications</Label>
  <Switch id="notifications" />
</div>
```

Radio Group

Slider