Checkbox
Lets users select one or more options, or toggle a single setting before submitting.JSX
<Checkbox aria-label="Accept terms" />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Checkbox, HStack, Label } from '@advui/core'
<HStack gap="2">
<Checkbox id="terms" checked={accepted} onCheckedChange={setAccepted} />
<Label htmlFor="terms">Accept terms and conditions</Label>
</HStack>Examples
With label
Preview
Code
Indeterminate (select all)
Preview
Code
API reference
Checkbox
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | 'indeterminate' | — | Controlled state. |
defaultChecked | boolean | 'indeterminate' | false | Initial state when uncontrolled. |
onCheckedChange | (checked: boolean | 'indeterminate') => void | — | Called when toggled. |
size | 'sm' | 'md' | 'md' | 16 or 20px. |
disabled | boolean | false | Prevents toggling. |
invalid | boolean | false | Error styling + `aria-invalid`. |
name | string | — | Field name when a native form is submitted.Web only. |
value | string | — | Value sent with the form when checked.Web only. |
required | boolean | — | The native form will not submit until it is checked.Web only. |
Accessibility
- Exposes
role="checkbox"witharia-checked= true / false / mixed. - Link a
LabelwithhtmlForfor a larger hit area and an accessible name. - A hidden native input keeps form submission and autofill working on web.
| Key | Action |
|---|---|
| Space | Toggles the checkbox. |
Platform notes
Web
Custom-drawn control backed by a hidden
<input type="checkbox">.iOS
Pressable with checkbox semantics (iOS has no native checkbox).
Android
Pressable with checkbox semantics announced by TalkBack.