Atelier UI

Search components…

Search components…

Switch

Toggle switch in three sizes with optional label and description following the ARIA switch pattern.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

SwitchProps

Also accepts all props of Omit<React.ComponentProps<"button">, "onChange" | "role">

PropTypeDefaultDescription
checkedboolean——
defaultCheckedbooleanfalse—
onCheckedChange(checked: boolean) => void——
sizekeyof typeof sizes"md"—
labelReact.ReactNode—Visible label rendered next to the switch
descriptionReact.ReactNode——

Install

$ npx shadcn@latest add https://chromotion.dev/r/switch.json

More like this