Night
Paper / black
The grid stays. Only the ink inverts.
Switch
Turns one setting on or off. A slim 44×24px track sits inside a 44px touch target.
Preview
In action
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
<button type="button" class="rs-switch rs-switch-on" role="switch" aria-checked="true" aria-label="Notifications"><i class="rs-switch-thumb rs-switch-thumb-on" aria-hidden="true"></i></button>
Classes
.rs-switch.rs-switch-on.rs-switch-thumb.rs-switch-thumb-on