Form controls

Toggle

A switch for binary settings: feature flags, notification preferences, dark mode. Built on a role="switch" button, so screen readers announce state changes correctly.

Basic

Email notifications Daily digest at 9am UTC.

Sizes

The switch is drawn small and takes an invisible 44px target under a touch screen. Stacked switch rows therefore sit 24px apart there, or each target overlaps the row below and a tap meant for one flips the next. A mouse needs only the 12px gap.

Small Medium (default)

Disabled

Locked on You can't change this.

API

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable on/off state.
`label`	`string`	no default	Inline label.
`hint`	`string`	no default	Subdued hint below the label.
`size`	`'sm' \| 'md'`	`'md'`	Switch size.
`disabled`	`boolean`	`false`	Disable the toggle.
`onchange`	`(checked: boolean) => void`	no default	Fires when the user flips the switch.
`class`	`string`	no default	Extra classes, appended to the component's own.
`id`	`string`	no default	Lets a Label outside the component point at the switch.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.
`name`	`string`	no default	Posts on under this name while the switch is on, as a checkbox does.