Build · New

Toggle

A switch with a title and a description for settings rows, in two sizes. The change applies immediately.

Preview

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

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

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

<Toggle defaultChecked description="Get alerts for transfers and card payments.">
  Enable notifications
</Toggle>

size="sm": a body-14 title over body-12, 8px from the switch. disabled greys out the switch and the texts.

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Title.
`description`	`ReactNode`		Figma's Description.
`checked / defaultChecked / onCheckedChange`	`…`		Figma's Value, as on Switch.
`size`	`"md" \| "sm"`	`"md"`	Figma's Size.
`icon / disabled / name / value`	`…`		As on Switch.

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 too).

role="switch" named by the title and linked to the description; clicking either text toggles it.

The switch sits at the start (the right) with the texts after it, and the knob moves left when On.

Numerals: Numbers in the description follow numerals.
Arabic typography: The title is body-16 Medium, the description body-14 (body-14 and body-12 at sm).