Checkbox

Code

<Field className="flex-row items-center gap-2">  <Checkbox id="copy" defaultChecked />  <FieldLabel htmlFor="copy">Email me a copy</FieldLabel></Field>

Forms · beta

Live examples and controls: Checkbox in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/checkbox.json

A 16px box with a 24px hit area. Use it for choices that are applied when a form is submitted, and for row selection. indeterminate draws a dash and reports aria-checked="mixed": use it on a "select all" box when only some items are selected.

When to useCopy Anchor Link

• Form options that take effect on submit ("Email me a copy").
• Selecting items in a list or table (DataTable uses it).

When not to useCopy Anchor Link

• A setting that takes effect immediately: use Switch.
• Picking one of several options: use a radio group or a select.

ImportCopy Anchor Link

import { Checkbox } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<Field className="flex-row items-center gap-2">
  <Checkbox id="copy" defaultChecked />
  <FieldLabel htmlFor="copy">Email me a copy</FieldLabel>
</Field>

Or wrap it in a <label>: <label className="flex items-center gap-2"><Checkbox /> Email me a copy</label>.

APICopy Anchor Link

All Base UI Checkbox.Root props, including:

AccessibilityCopy Anchor Link

• Renders role="checkbox" with aria-checked. Space toggles it.
• Always give it a name: a <label>, a FieldLabel, or aria-label when it stands alone (as in a table row).
• The hit area is 24px, although the box is 16px.

RTL & i18nCopy Anchor Link

Nothing to mirror. The check and dash glyphs are symmetric.

Styling & tokensCopy Anchor Link

Unchecked: border-nq-line-strong on bg-card. Checked or indeterminate: bg-primary. Focus ring: nq-focus. Radius 4px. className merges onto the root.

RelatedCopy Anchor Link

switch (immediate settings), field, data-table (row selection).

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-checkbox--docs