Skip to main content
🏠FormCheckboxVersion: 2.0.0-beta.7

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".

Small

Medium

Large

<qtm-checkbox size="small" checked>Small</qtm-checkbox>
<qtm-checkbox size="medium" checked>Medium</qtm-checkbox>
<qtm-checkbox size="large" checked>Large</qtm-checkbox>

Selection

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

UncheckedCheckedIndeterminate
<qtm-checkbox>Unchecked</qtm-checkbox>
<qtm-checkbox checked>Checked</qtm-checkbox>
<qtm-checkbox indeterminate>Indeterminate</qtm-checkbox>

Colors

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

UncheckedCheckedIndeterminate
Unchecked

Checked

Indeterminate

<qtm-checkbox color="primary">Unchecked</qtm-checkbox> ...

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.

Unchecked

Checked

Indeterminate

<qtm-checkbox error>Unchecked</qtm-checkbox> ...

Disabled

Checkboxes can also have a disable state.

Unchecked

Checked

Indeterminate

<qtm-checkbox disabled>Unchecked</qtm-checkbox> ...

Required

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

<qtm-checkbox required>Checkbox</qtm-checkbox>

InputId

The id of the checkbox element

<qtm-checkbox input-id="checkbox">Checkbox</qtm-checkbox>

Label

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

<qtm-checkbox label="Check Box" />

Custom labels

Checkbox accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

Option 1

This is some placeholder help text.

<qtm-checkbox>
<div>
<qtm-typography>Option 1</qtm-typography>
<qtm-typography component="caption-1" classes="text-bluegrey-500">
This is some placeholder help text.
</qtm-typography>
</div>
</qtm-checkbox>

Checkbox Group

qtm-checkbox-group is a helpful wrapper used to group checkbox elements.

Checkbox 1Checkbox 2Checkbox 3
<qtm-checkbox-group>
<qtm-checkbox checked>Checkbox 1</qtm-checkbox>
<qtm-checkbox>Checkbox 2</qtm-checkbox>
<qtm-checkbox>Checkbox 3</qtm-checkbox>
</qtm-checkbox-group>

Sizes

qtm-checkbox-group 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.

SmallCheckbox 1Checkbox 2Checkbox 3MediumCheckbox 1Checkbox 2Checkbox 3LargeCheckbox 1Checkbox 2Checkbox 3
<qtm-checkbox-group size="small">
<qtm-checkbox checked>Checkbox 1</qtm-checkbox>
...
</qtm-checkbox-group>
...

API

qtm-checkbox

PropertyTypeDefaultDescription
checkedbooleanfalseIf true, the checkbox is checked.
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color"neutral" | "primary"'primary'The color of the checkbox
disabledbooleanfalseIf true, the component is disabled.
errorbooleanfalseIf true, the component is in error state.
indeterminatebooleanfalseIf true, the input appears indeterminate.
inputIdstringThe id of the input element
labelstringLabel attribute of the checkbox element
namestringName attribute of the input element
requiredbooleanfalseif true, the input element will be required
size"large" | "medium" | "small"'medium'The size of the checkbox
EventTypeDescription
valueChangedCustomEvent<{ checked: boolean; }>Callback fired when the checkbox is clicked. You can pull out the state checkbox by accessing event.detail.checked

qtm-checkbox-group

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
size"large" | "medium" | "small"'medium'The size of element