Checkbox

In the app

Row selection in tables. 16px, 4px radius, navy when checked. A button with role="checkbox", so every state is styled.

@varick/ui/components/checkboxAdded 2 Sept 2026

Submission routerRenewal managerCompliance check

Usage

import { Checkbox } from "@varick/ui/components/checkbox";

export function Example() {
  return (
    <label>
      <Checkbox checked={selected} onCheckedChange={setSelected} />
      Submission router
    </label>
  );
}

Variants

States

<Checkbox />
<Checkbox defaultChecked />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
checked	boolean	uncontrolled	Controlled state, with onCheckedChange.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean) => void	undefined	Fires on every toggle.
disabled	boolean	false	Dims and ignores clicks.

Accessibility

role="checkbox" with aria-checked. Space and Enter toggle because it is a real button.
Wrap it in a label, or give it aria-label when the row text is the name.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.tbl-check { width: 16px; height: 16px; accent-color: var(--fg-high); }
tbody tr:has(.tbl-check:checked) { background: var(--accent-fade); }

/* Equivalent for the styled control */
.checkbox {
  width: 16px; height: 16px;
  border: 1px solid var(--hairline-hover);
  border-radius: 4px;
  background: #FFFFFF;
  display: grid; place-content: center;
}
.checkbox[aria-checked="true"] { background: var(--fg-high); border-color: var(--fg-high); color: #FFFFFF; }