ComponentsForms & inputs

Checkbox

Independent yes/no choices and multi-select: consent, row selection, permissions, modules. Tri-state (indeterminate), a labelled row with description, a selectable card, and CheckboxGroup for array values. Reads the surrounding Field.

Radix Checkbox components/checkbox.tsx, lib/field-context.tsx, styles/forms.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Checkbox, CheckboxGroup, Field } from "@vamos-ui/react";

<Checkbox label="Allow comments" defaultChecked />

<Field label="Notify me by">
  <CheckboxGroup name="channels" items={[{ value: "email", label: "Email" }, { value: "sms", label: "SMS" }]} />
</Field>

Enter does not toggle a checkbox (WAI-ARIA); Space does. The label, the description and the whole card are click targets.

In glass mode the unchecked border uses --field-border-hover so the box doesn't vanish on the scene.

Examples

Select all (indeterminate)

checked="indeterminate" renders a dash and aria-checked="mixed". Icon-only boxes need an aria-label.

1 selected
  • INV-2041Northwind Traders$4,820.00
  • INV-2042Bosphorus Dental$1,260.00
  • INV-2043Kadıköy Roasters$389.50
  • INV-2044Lumen Architects$12,400.00

Group

CheckboxGroup keeps one string[] value in item order, is a role=group labelled by the Field, and submits one entry per checked item (formData.getAll).

We never send more than one digest per day.

Card selection

variant="card" turns items into tiles; the whole tile is clickable and the focus ring belongs to the tile.

You can turn modules on or off later in Settings → Workspace.

Required consent

Inside a horizontal Field the box gets aria-required, aria-invalid and the error as its description. Native FormData, no form library.

Sizes & states

sm (16px) for tables, md (18px) default. Read-only stays focusable and announced, but can't change.

API

Checkbox

PropTypeDefault
checked
Controlled state.
boolean | "indeterminate"—
defaultChecked
Initial state (uncontrolled).
boolean | "indeterminate"false
onCheckedChange
Called with the next state.
(checked: boolean | "indeterminate") => void—
label
Text beside the box; the row is clickable and names the control.
ReactNode—
description
Second line, linked with aria-describedby.
ReactNode—
size
16 / 18 px box.
"sm" | "md""md"
variant
Card = bordered selectable tile (needs label).
"default" | "card""default"
icon
Leading icon in a card.
ReactNode—
invalid
Danger border + aria-invalid. Set by Field error.
boolean—
readOnly
Focusable, announced as read-only, value locked.
boolean—
name / value
Form submission (hidden input).
stringvalue "on"
required / disabled
Native semantics; also inherited from Field.
boolean—
controlClassName
Classes for the box when label is used (className goes on the row).
string—

CheckboxGroup

PropTypeDefault
value / defaultValue
Checked item values, kept in item order.
string[][]
onValueChange
Called with the next array.
(value: string[]) => void—
items
Shorthand; or compose CheckboxGroupItem children.
{ value, label, description?, icon?, disabled? }[]—
name
Each checked item submits one entry under this name.
string—
variant
Card lays the items out as tiles in a responsive grid.
"default" | "card""default"
orientation
Layout of default items.
"vertical" | "horizontal""vertical"
size
Passed to every item.
"sm" | "md"—
disabled / readOnly / invalid / required
Applied to the whole group; inherited from Field.
boolean—

CheckboxGroupItem

PropTypeDefault
value
Required. Added to the group value when checked.
string—
…
label, description, icon, disabled…
CheckboxProps—
Previous
Chart frame
Next
Collapsible