Checkbox
A boolean choice with an indeterminate state and a 24 px hit area.
@luc/uiExamples
Checked, unchecked, indeterminate
Radix supplies the semantics, the indeterminate state and the keyboard path; the hit area is 24 px even though the box is smaller.
<Checkbox label="Auto-apply patches" defaultChecked />Disabled and invalid
`disabled` is for a choice the reader cannot make here; `invalid` marks a box whose answer the form rejected, and neither is expressed with opacity alone.
<Checkbox label="Locked by the workspace owner" disabled defaultChecked />With a description
The description is wired to the control with `aria-describedby` rather than merely sitting under it.
Splits and dividends are already applied.
<Checkbox
label="Adjusted prices"
description="Splits and dividends are already applied."
defaultChecked
/>Usage
import { Checkbox } from "@luc/ui";<Checkbox label="Auto-apply patches" defaultChecked />Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Checkbox | 8 documented props | ({ className, label, description, invalid, id, disabled, ...props }: CheckboxProps) => import("@types/react").JSX.Element |
Checkbox props
Type: CheckboxProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
checked?inherited | CheckedState | undefined | — | |
defaultChecked?inherited | CheckedState | undefined | — | |
description? | ReactNode | — | |
invalid? | boolean | undefined | — | |
label? | ReactNode | — | Optional inline label rendered to the right of the box. |
onCheckedChange?inherited | ((checked: CheckedState) => void) | undefined | — | |
required?inherited | boolean | undefined | — |
Guidelines
Do
- Use a checkbox for an answer a form submits; a setting that applies the moment it is flipped is a `Switch`.
- Read `indeterminate` as “some of the children are selected”, which is what it means to a screen reader too.
- Give a set of boxes a `Fieldset` legend, so the question they answer has a name.
Don't
- Use a checkbox as a toggle that saves on its own; the reader expects to submit it.
- Express `invalid` with opacity: the treatment is a border and a message, and the message belongs to `Field`.
- Put two boxes in one row for different questions — one box, one answer.
Accessibility
Radix supplies `role="checkbox"` with `aria-checked` including the mixed state, and a 24 px hit area behind an 18 px box. The label is part of the control, so clicking the text toggles it, and a `Field` adds the description and the message through `aria-describedby`.
Family
Forms
Inputs, their validation surfaces and the form lifecycle around them.
24 documented entries in this family. Open the family index
Related