Forms

Switch

On or off, taking effect immediately. If the change needs a Save button it is a Checkbox: the shape is a promise about when something happens.

State

On, off, and either of those with disabled.

Publish provenance

Dry run

Two-factor required

Signed commits enforced

<Switch defaultChecked>Publish provenance</Switch>
<Switch>Dry run</Switch>
<Switch disabled>Two-factor required</Switch>
<Switch disabled defaultChecked>Signed commits enforced</Switch>

Label

Children put the label at the start of the row and the track at the end, filling the width. Omit them for the track alone, inline, when something else does the labelling.

Publish provenance

<Switch defaultChecked>Publish provenance</Switch>
<Switch defaultChecked />

A switch in a form with a Save button is the usual misuse. The user flips it, walks away, and finds out later that nothing was saved, because the control told them it had already happened.

Props

Prop	Type	Default	Notes
`checked`	`boolean`	—	Controlled state.
`defaultChecked`	`boolean`	—	Uncontrolled initial state.
`onCheckedChange`	`(checked: boolean) => void`	—	Fires on every flip. This is where the change is applied.
`children`	`ReactNode`	—	Label text. Omit to render the track alone.
`disabled`	`boolean`	false	Blocks the flip and dims the track, in either state.