Checkbox

Usage

import { Checkbox } from '@acronis-platform/ui-react';

Checkbox wraps Base UI's Checkbox primitive — keyboard interaction, focus management, and ARIA come from Base UI. It supports checked, unchecked, and indeterminate states, themed by the --ui-checkbox-* tokens.

Examples

A bare checkbox (name it with aria-label):

<Checkbox aria-label="Accept terms" />

The box is align-middle, so a bare checkbox stays vertically centered against adjacent inline text (e.g. in a table cell) rather than sitting on the text baseline.

With a label and optional description — the whole row becomes clickable:

<Checkbox label="Email notifications" />

<Checkbox
  label="Email notifications"
  description="Send a summary every morning."
/>

Controlled:

const [checked, setChecked] = React.useState(false);

<Checkbox label="Selected" checked={checked} onCheckedChange={setChecked} />

Indeterminate and disabled states:

<Checkbox label="Mixed" indeterminate />
<Checkbox label="Locked policy" defaultChecked disabled />

indeterminate is set by the consumer and is independent of checked — clicking does not clear it, and it wins over checked for the rendered glyph and aria-checked="mixed".

Form attributes pass straight through to Base UI:

<Checkbox label="Accept terms" required />
<Checkbox label="Managed by your admin" defaultChecked readOnly />

required sets aria-required and marks the hidden native input as required for submission. readOnly sets aria-readonly and blocks click/Space from changing the state, while keeping the box focusable and in the tab order. Neither prop has a visual treatment of its own — a read-only box still shows its normal hover/active feedback and cursor, it just silently ignores the click — so pair it with surrounding copy (or a description) that explains why it cannot be changed. This is a known gap, not a final design decision: the absence of a dedicated visual affordance for readOnly and required is current behavior pending design-lead sign-off, not something design has ratified as intentional — unlike InputSelect, whose required label renders a visual * marker. Treat the lack of a Checkbox affordance as provisional rather than a pattern to copy elsewhere.

API Reference