Checkbox

Boolean toggle with label, description, indeterminate state, and error messaging.

Import

import { Checkbox } from '@arcana-ui/core'

Usage

<Checkbox label="I agree to the terms" />
<Checkbox label="Subscribe to newsletter" description="Weekly updates, no spam." />
<Checkbox label="Remember me" checked={checked} onChange={(e) => setChecked(e.target.checked)} />
<Checkbox label="Select all" indeterminate />
<Checkbox label="Required" error="You must accept to continue" />
<Checkbox label="Disabled" disabled />

Props

Prop	Type	Default	Description
`label`	`string`	—	Visible label text
`description`	`string`	—	Secondary text below label
`indeterminate`	`boolean`	`false`	Partial selection state
`error`	`string \| boolean`	—	Error message or error flag
`className`	`string`	—	Additional CSS classes on wrapper
`...rest`	`InputHTMLAttributes`	—	All native checkbox attributes (`checked`, `onChange`, `disabled`, etc.)

Controlled

const [accepted, setAccepted] = useState(false)
 
<Checkbox
  label="Accept terms of service"
  checked={accepted}
  onChange={(e) => setAccepted(e.target.checked)}
/>

Indeterminate state

Used to represent partial selection in a select-all pattern:

const allSelected = items.every((i) => selected.has(i.id))
const someSelected = items.some((i) => selected.has(i.id))
 
<Checkbox
  label="Select all"
  checked={allSelected}
  indeterminate={someSelected && !allSelected}
  onChange={handleSelectAll}
/>

With error

<Checkbox
  label="I accept the privacy policy"
  error="You must accept the privacy policy to continue"
/>

Accessibility

Renders as native <input type="checkbox">
indeterminate managed via useEffect on the DOM node
Error message associated via aria-describedby and role="alert"
aria-invalid="true" when error is set
Disabled state prevents onChange from firing

Radio — mutually exclusive options
Toggle — immediate-action boolean switch
Form — form layout

On this page