Switch

A two-state on/off toggle.

Props#

Name	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Uncontrolled initial checked state.
`disabled`	`boolean`	`false`	Disable the switch.
`label`	`string`	—	Label rendered next to the switch.
`onChange`	`((checked: boolean) => void)`	—	Change handler — receives the new checked state.

Show code

Off.stories.tsx

import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Email notifications" />;

Show code

On.stories.tsx

import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Email notifications" defaultChecked />;

Show code

Disabled.stories.tsx

import { Switch } from '../../../src/pixie/Switch.js';

export default () => <Switch label="Locked setting" disabled defaultChecked />;