Build · New

Switch

Turns a single setting on or off, and the change applies immediately. The knob sits at the inline start when Off and moves to the inline end when On.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/switch

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

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

<Switch name="alerts" defaultChecked description="Notify me when a price moves 5%">
  Price alerts
</Switch>

Examples

States, size and icon

icon puts a check or an X in the knob, size="sm" is the small switch, disabled disables it, and label adds a label above the row and makes it a named group.

API reference

Switch

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label: name the setting, not the state.
`checked / defaultChecked`	`boolean`		Figma's Value: On or Off.
`onCheckedChange`	`(checked: boolean) => void`		When it's toggled.
`description`	`ReactNode`		Figma's Show hint support: a helper line.
`label`	`ReactNode`		Figma's Show label: a label above the row.
`size`	`"md" \| "sm"`	`"md"`	A 52×32 or 32×20 track.
`icon`	`boolean`	`false`	Figma's Icon: a check when On, an X when Off.
`disabled`	`boolean`		State = Disabled.
`name / value`	`string`		For forms: the value is sent while it's On.

SwitchCore

Prop	Type	Default	Description
`aria-label / aria-labelledby`	`string`		The track and knob alone, for custom rows; name it.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Space`	Toggles it.
`Enter`	Toggles it too.

ARIA

role="switch" with aria-checked, named by the row's text and linked to its helper line; clicking the text toggles it.
The touch target is at least 48px, even at size sm.
Inside a form with a Submit button, use a Checkbox.

Arabic and RTL notes

Mirrors

The switch sits at the start of the row (the right).
On moves the knob to the inline end: to the left in Arabic. Don't flip it by hand.

Does not mirror

The check and the X in the knob don't mirror.

Numerals: Numbers in the text follow numerals through formatNumber.
Arabic typography: The text is label-16 Medium, the helper label-12; the row grows with the taller Arabic line height.

All components ›