Switch
An on/off toggle for settings that take effect immediately.JSX
<Switch aria-label="Airplane mode" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { HStack, Label, Switch } from '@advui/core'
<HStack gap="3">
<Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
<Label htmlFor="notifications">Notifications</Label>
</HStack>Examples
Settings list
Preview
Code
Order updates and mentions.
Product news, at most once a month.
API reference
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | On or off, when you control it. |
defaultChecked | boolean | — | Starting `checked` when uncontrolled. |
onCheckedChange | (checked: boolean) => void | — | Called when toggled. |
size | 'sm' | 'md' | 'md' | 36×20 or 44×24. |
disabled | boolean | false | Prevents toggling. |
Accessibility
- Exposes
role="switch"witharia-checked, and its checked and disabled states on iOS and Android too. - Use a Switch for immediate effects; use a Checkbox inside forms that need a submit.
- The thumb animation is removed when reduced motion is requested.
| Key | Action |
|---|---|
| Space / Enter | Toggles the switch. |
Platform notes
Web
Rendered as a
<button role="switch"> with a hidden checkbox for forms.iOS
Custom drawn for visual consistency across platforms.
Android
Custom drawn; TalkBack announces “switch, on/off”.