Checkbox

The Checkbox component is a versatile form control for selecting one or multiple options.

Usage & Examples

Default

default.tsx
<Checkbox label="Accept Terms" checked={checked} onChange={...} />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<Checkbox theme="primary" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox theme="secondary" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox theme="tertiary" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox theme="quaternary" label="Accept Terms" checked={checked} onChange={...} />

// States
<Checkbox state="success" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox state="warning" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox state="error" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox state="info" label="Accept Terms" checked={checked} onChange={...} />

// Sizes
<Checkbox size="xs" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox size="small" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox size="medium" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox size="large" label="Accept Terms" checked={checked} onChange={...} />

// Variants
<Checkbox variant="solid" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox variant="outline" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox variant="glass" label="Accept Terms" checked={checked} onChange={...} />

// Rounding
<Checkbox rounding="none" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox rounding="medium" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox rounding="large" label="Accept Terms" checked={checked} onChange={...} />

// Shadows
<Checkbox shadow="none" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox shadow="light" label="Accept Terms" checked={checked} onChange={...} />
<Checkbox shadow="strong" label="Accept Terms" checked={checked} onChange={...} />

Interaction states

Disabled
interaction-states.tsx
// Disabled
<Checkbox disabled label="Accept Terms" checked={checked} onChange={...} />

Props API

30 props
Columns
Checkbox props API
Default
Description
aria-describedbystringNoaria—ID reference(s) to element(s) that describe the checkbox. This may include helper text, error text, or external descriptions.
aria-errormessagestringNoaria—ID reference to the element containing the error message. Typically used together with aria-invalid.
aria-labelstringNoaria—Accessible label for the checkbox when no visible label is present or when a more descriptive label is needed.
aria-labelledbystringNoaria—ID reference(s) to element(s) that label the checkbox. If provided, this takes precedence over the internal label association.
boxClassNamestringNoprops—Additional class names for the visual checkbox box.
checkedbooleanYesprops—Checked state of the checkbox.
classNamestringNostyling—Custom class name for additional styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionClassNamestringNoprops—Additional class names for the helper description.
disabledbooleanNopropsfalseWhether the checkbox is disabled.
errorMessageReactNodeNoprops—Visible error message rendered for invalid state. This can also be referenced by assistive technologies.
errorMessageClassNamestringNoprops—Additional class names for the error message.