Checkbox

Selects any number of options. 16px box, 3px radius, ink fill when checked.

Preview

BrandProduct

In action

Pass

Proof checklist

The sheet leaves when every box is ink.

BrandProductType

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`

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 onChange, or uncontrolled with defaultChecked.

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="butt" stroke-linejoin="miter"><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" vector-effect="non-scaling-stroke"/></svg></span>Brand</label>

Classes

.rs-choice.rs-check.rs-check-on