Checkbox, Asgard Docs

Inputs & forms

Select one or more options.

Checkbox provides a standard check input with support for groups, indeterminate state, and icon variants.

Key features:

CheckboxGroup for managing multiple selections
indeterminate state for parent checkboxes in trees
icon variant with custom checkedIcon and icon props
Semantic coloring across three sizes

Loading preview…

When to use it

Accept terms / remember me
Multi-select within a list or filter
Bulk-select rows in a table (with indeterminate parent)
Icon checkboxes (favorite, star)

Properties

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the checkbox is currently checked.
`onChange`	`(checked: boolean) => void`	—	Callback fired when the checked state changes. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`label`	`string`	—	Text label displayed next to the checkbox.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Controls the size of the checkbox.
`type`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Semantic color type applied to the checkbox.
`variant`	`'default' \| 'icon'`	`'default'`	When set to icon, replaces the standard checkmark with custom icons.
`indeterminate`	`boolean`	`false`	Displays an indeterminate (minus) state, useful for parent checkboxes in trees.
`disabled`	`boolean`	`false`	Disables the checkbox, preventing user interaction.

Notes

CheckboxGroup manages layout and spacing for multiple checkboxes but does not control their state.
The icon variant replaces the default checkmark with custom ReactNode icons provided via the icon and checkedIcon props.

Presets