Switch

Turns one setting on or off. 32×18px; on fills with ink, off uses a 1px track.

Preview

In action

Night

Paper / black

The grid stays. Only the ink inverts.

When to use

Use it for

A setting that applies as soon as it flips.
Binary state with a clear on and off.

Not for

Choices that need a submit button; use Checkbox.
More than two states; use ToggleGroup.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Switch } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/switch.

2. Vendor the source

npx @noorddev/vlak-cli add switch

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/switch.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { Switch } from "@noorddev/vlak-react";

const [enabled, setEnabled] = useState(false);

<Switch checked={enabled} onCheckedChange={setEnabled} aria-label="Notifications" />

Props

Switch

A button with role="switch".

Prop	Type	Default	Description
`checked`	`boolean`
`defaultChecked`	`boolean`
`onCheckedChange`	`(checked: boolean) => void`

Also accepts Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange">.

Keyboard

Keys	Does
`Tab`	Moves focus to the switch
`Space, Enter`	Toggles it

Accessibility

A native <button> with role="switch" and aria-checked.
It has no visible text; pass aria-label or aria-labelledby.
Controlled with checked and onCheckedChange, or uncontrolled with defaultChecked.

Markup

<span class="rs-switch rs-switch-on"><i></i></span>

Classes

.rs-switch.rs-switch-on.rs-switch-thumb.rs-switch-thumb-on