Switch

A slanted track with a slab inside it. Turned on, the track fills with the accent and the slab springs across to the other end, parallel to the track's cut at both.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/switch

Examples

On, off, and larger

Night routesShare my positionLarger, beside larger text

switch-basic.tsx

import { Switch } from "@/components/zero/switch";export default function SwitchBasic() {  return (    <div className="grid gap-4">      <label className="flex items-center gap-3">        <Switch defaultChecked />        Night routes      </label>      <label className="flex items-center gap-3">        <Switch />        Share my position      </label>      <label className="flex items-center gap-3 text-zero-lg">        <Switch />        Larger, beside larger text      </label>    </div>  );}

Behaviour

The slab slides on the release timing, past its stop and back. Sized in em: beside larger text the whole switch is larger.

Use a Switch for something that takes effect at once (night routes on); use a Checkbox for a choice that is submitted with a form.

Props

Switch

Prop	Type	Default	Description
checked	boolean	—	On, controlled; with onCheckedChange.
defaultChecked	boolean	false	On, uncontrolled.

Also takes every prop of Base UI's Switch.Root.