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.
<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.
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.
Checked
Indeterminate
<qtm-checkbox error>Unchecked</qtm-checkbox> ...
Disabled
Checkboxes can also have a disable state.
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.
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.
<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.
<qtm-checkbox-group size="small">
<qtm-checkbox checked>Checkbox 1</qtm-checkbox>
...
</qtm-checkbox-group>
...
API
qtm-checkbox
| Property | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | If true, the checkbox is checked. |
| classes | string | list 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 |
| disabled | boolean | false | If true, the component is disabled. |
| error | boolean | false | If true, the component is in error state. |
| indeterminate | boolean | false | If true, the input appears indeterminate. |
| inputId | string | The id of the input element | |
| label | string | Label attribute of the checkbox element | |
| name | string | Name attribute of the input element | |
| required | boolean | false | if true, the input element will be required |
| size | "large" | "medium" | "small" | 'medium' | The size of the checkbox |
| Event | Type | Description |
|---|---|---|
| value-changed | CustomEvent<{ checked: boolean; }> | Callback fired when the checkbox is clicked. You can pull out the state checkbox by accessing event.detail.checked |
qtm-checkbox-group
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list 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 |