Toggle

A switch with some weight to it. The knob stretches along its direction of travel and settles on a spring, so the flip feels thrown rather than snapped. Controlled or uncontrolled, three sizes, with an optional label and hint.

Installation

npx stepwise-ui add toggle

Default

import { Toggle } from '@/components/stepwise/toggle'

const [on, setOn] = useState(true)

// no visible label - needs ariaLabel so screen readers know what it does
<Toggle checked={on} onChange={setOn} ariaLabel="Toggle" />

Sizes

default

<Toggle size="sm" defaultChecked ariaLabel="Small toggle" />
<Toggle size="default" defaultChecked ariaLabel="Default toggle" />
<Toggle size="lg" defaultChecked ariaLabel="Large toggle" />

With label

The label and hint are wired to the switch, so clicking either flips it.

Email notificationsGet a digest when something needs you.

Public profileAnyone with the link can view it.

Two-factor authEnforced by your organisation.

<Toggle
  checked={on}
  onChange={setOn}
  label="Email notifications"
  hint="Get a digest when something needs you."
/>

Props

PropTypeDescription

checked

boolean

Controlled state.

defaultChecked

boolean

Uncontrolled initial state.

onChange

(checked: boolean) => void

Fires on flip.

size

"sm" | "default" | "lg"

Default "default".

label

string

Label beside the switch.

hint

string

Helper line under the label.

ariaLabel

string

Accessible name for the switch. Needed when used without `label`.

disabled

boolean

Disables the switch.

className

string

Merged onto the outer wrapper.