Switch

A boolean toggle. Built on Radix Switch.

Import

import { Switch } from '@aspect/react';

Usage

<Switch aria-label="Notifications" />
<Switch defaultChecked aria-label="Enabled" />

Controlled

const [on, setOn] = useState(false);
<Switch checked={on} onCheckedChange={setOn} />;

Props

| Prop | Type | Default | Description | | ----------------- | ---------------------------- | ------- | -------------------------- | | checked | boolean | — | Controlled state | | defaultChecked | boolean | — | Uncontrolled initial state | | onCheckedChange | (checked: boolean) => void | — | Change handler | | disabled | boolean | false | Disables the switch |

Guidelines

Do:

• Always pair with a visible label
• Use for instant-effect toggles (dark mode, notifications)

Don't:

• Don't use for form submissions that require a save button — use Checkbox instead