videorc/uiCheckbox
A 16 px checkbox on Base UI. Checked or mixed, it wears the chrome fill; mixed draws a dash instead of the check.
Installation
$ pnpm dlx shadcn@latest add @videorc/checkboxUsage
import { Checkbox } from "@/components/ui/checkbox";<Field orientation="horizontal">
<Checkbox defaultChecked />
<FieldLabel>Include markers in the export</FieldLabel>
</Field>Examples
With a description
Put the label and a FieldDescription in a FieldContent beside the checkbox. The description describes the checkbox, and a disabled one says why.
Indeterminate
A header checkbox over some of its rows is indeterminate: it fills like checked and draws a dash. Clear it once every row, or none, is checked.
Theming
| Token or attribute | Meaning |
|---|---|
chrome-fill | The fill and ink while checked or indeterminate |
bg-input/90 | The recessed box while unchecked |
rounded-chip | The 6 px control radius |
data-checked, data-unchecked, data-indeterminate | The state, from Base UI |
data-disabled | Dims to 50% |
aria-invalid | Draws the destructive border and ring |
Keyboard
| Key | Action |
|---|---|
| Space | Toggles the checkbox |
| Enter | Submits its form; it never toggles |
| Tab | Moves focus to the next control |
Accessibility
The checkbox is a role="checkbox" span with aria-checked ("mixed" while indeterminate), beside a hidden native input that carries its form value. Its id goes on that hidden input, so a FieldLabel or a Label with htmlFor toggles it on click, and Base UI names the checkbox by that label. A row of checkboxes with no visible labels, such as a list's select column, names each one with aria-label.
API reference
Every Base UI Checkbox root prop, plus:
Prop
Type