Switch

A binary toggle for a setting that applies immediately.

Automatic deploysDeploy every push to main.

<SwitchdefaultCheckedlabel="Automatic deploys"description="Deploy every push to main."/>

A Switch applies the moment it is flipped. That is the whole distinction from a Checkbox: a checkbox is a value you are editing and will submit, a switch is a state you are changing now. If there is a Save button below it, it should probably be a checkbox.

Usage

tsx

import { Switch } from "@heyo-sh/heyo-ui";<Switch label="Automatic deploys" defaultChecked onCheckedChange={save} />;

Settings rows

align="end" puts the control after the text, which is the layout a settings list wants: labels line up on the left, switches line up on the right.

Automatic deploysDeploy every push to main.

Preview commentsComment on each pull request.

<Switch align="end" defaultChecked label="Automatic deploys" description="Deploy every push to main." /><Switch align="end" label="Preview comments" description="Comment on each pull request." />

Bare and disabled

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

Properties

labelReactNodeoptional

An inline label. Its presence turns the component into the whole clickable row.

descriptionReactNodeoptional

Muted helper text under the label.

align"start" | "end"optional

Where the control sits relative to the text. It defaults to start; end is the settings-row layout.

checked / defaultCheckedbooleanoptional

Controlled and uncontrolled state.

onCheckedChange(checked: boolean) => voidoptional

Fires when the switch is flipped.

disabledbooleanoptional

Dims the row and ignores interaction.

wrapperClassNamestringoptional

Class for the outer <label>.

classNamestringoptional

Class for the track itself.

name / required / value—optional

Standard form behaviour, passed through to Base UI.

Loading documentation…