Pass
Proof checklist
The sheet leaves when every box is ink.
Checkbox
Selects any number of options. A 44px target surrounds the check mark; indeterminate uses a minus.
Preview
In action
When to use
Use it for
- Independent on and off choices, alone or in a list.
- Consent and acknowledgement lines.
Not for
- A setting that takes effect immediately; use Switch.
- One choice from many; use Radio.
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 { Checkbox } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/checkbox.
2. Vendor the source
npx @noorddev/vlak-cli add checkbox
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/checkbox.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 { Checkbox } from "@noorddev/vlak-react";
const [opted, setOpted] = useState(false);
<Checkbox label="Brand" defaultChecked />
<Checkbox label="Send me the newsletter" checked={opted} onChange={(e) => setOpted(e.target.checked)} />Props
Checkbox
A real native checkbox; the visible 16px box mirrors its state.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | ||
indeterminate | boolean | false | |
onCheckedChange | (checked: boolean) => void |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves focus to the checkbox |
| Space | Toggles it |
Accessibility
- A native <input type="checkbox"> hidden from view inside a <label>; the 16px box mirrors its state.
- label is the accessible name. Without one, pass aria-label.
- Controlled with checked and onCheckedChange or native onChange, or uncontrolled with defaultChecked. indeterminate sets the native mixed state.
Markup
<label class="rs-choice"><span class="rs-check rs-check-on"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.25 L6.25 11.5 L13 4.5" vector-effect="non-scaling-stroke"/></svg></span>Brand</label>
Classes
.rs-choice.rs-check.rs-check-on