Skip to main content
🏠FormCheckbox

Checkbox

Checkboxes allow users to select multiple options from a list, or to mark an individual item as selected.

Sizes

Checkboxes are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the checkbox has size="medium".

<Checkbox size="small" checked label="Small" />
<Checkbox size="medium" checked label="Medium" />
<Checkbox size="large" checked label="Large" />

Selection

Checkboxes can be unchecked, checked, or in an indeterminate state.

<Checkbox label="Unchecked" />
<Checkbox label="Checked" checked />
<Checkbox label="Indeterminate" indeterminate />

Colors

Checkboxes are available in two colors: primary and neutral. The default color is the primary color.

<Checkbox label="Unchecked" color="primary" /> ...

Errors

Checkboxes can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

<Checkbox label="Unchecked" error /> ...

Disabled

Checkboxes can also have a disable state.

<Checkbox label="Unchecked" disabled /> ...

Required

If a checkbox has the attribute required, it has to be checked.

<Checkbox label="Checkbox" required />

InputId

The id of the checkbox element

<Checkbox label="Checked" inputId="checkbox" />

Label

The label of the checkbox element. When label attribute is set, the text of the checkbox is set to the same.

<Checkbox label="Check Box" />

Custom labels

Checkbox Group

CheckboxGroup is a helpful wrapper used to group checkbox elements.

<CheckboxGroup>
<Checkbox label="Checkbox 1" checked />
<Checkbox label="Checkbox 2" />
<Checkbox label="Checkbox 3" />
</CheckboxGroup>

Sizes

CheckboxGroup are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

<CheckboxGroup size="small">
<Checkbox label="Checkbox 1" checked />
...
</CheckboxGroup>
...

API

Checkbox

Loading API documentation...

CheckboxGroup

Loading API documentation...