Switch

Customize

On color

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Examples

Controlled

Hold the state yourself with checked and onCheckedChange. Leave both out and use defaultChecked to let the switch keep its own state.

Color

color takes any CSS color for the track when it's on. The frame and knob stay black in light and dark mode.

Size

Without labels

showLabels={false} hides the fixed ON and OFF labels. Keep the aria-label so screen readers still know what it controls.

Usage

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

<Switch aria-label="Notifications" />

Tab to it and press Space or Enter to flip it. Always give it an aria-label.

Props

PropType

Controls the switch yourself.

Starting state when uncontrolled.

Defaulttrue

Called with the new state.

The track color when on.

Default"#42aa78"
Default"default"

Show or hide the fixed ON and OFF labels.

Defaulttrue
Defaultfalse

What the switch controls. Falls back to the current label.