Loading…

Switch

An immediate on/off toggle for settings that apply straight away.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add switch

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Switch } from "@/components/ui/switch";

Examples

Every example the tests run, live and operable, side by side.

Default
States
Settings Row
Animated Toggle

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Switch>

Prop	Type	Default
`icons` Icons drawn inside the thumb, one per state, that turn and crossfade as it moves. Decorative: the state is announced by the switch role.	`{ checked: ReactNode; unchecked: ReactNode }`	—
`variant` How the thumb moves. Opt-in, because both change the thumb's shape: - `default` — slides, as it always has. - `squash` — also stretches along its travel while held, like a finger pushing it. - `morph` — squashes, and rests as a rounded square when off and a circle when on. The press stretch only exists when the reader has not asked for reduced motion; the shape change still happens, instantly.	`"default" \| "squash" \| "morph"`	`"default"`

Every prop of Radix UI’s Switch.Root, plus className.

Accessibility

Exposed as role="switch" and toggled with Space or Enter. Needs a visible label tied with htmlFor/id. Do not rely on colour alone to show state — position and the label carry it too. Icons passed to `icons` are aria-hidden decoration; the press squash only runs without a reduced-motion preference.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

icons

Icons drawn inside the thumb, one per state, that turn and crossfade as it moves. Decorative: the state is announced by the switch role.

{ checked: ReactNode; unchecked: ReactNode }

—

variant

How the thumb moves. Opt-in, because both change the thumb's shape: - default — slides, as it always has. - squash — also stretches along its travel while held, like a finger pushing it. - morph — squashes, and rests as a rounded square when off and a circle when on. The press stretch only exists when the reader has not asked for reduced motion; the shape change still happens, instantly.

"default" | "squash" | "morph"

"default"