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

SmallMediumLarge

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

UncheckedCheckedIndeterminate

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

Colors

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

UncheckedCheckedIndeterminate

UncheckedCheckedIndeterminate

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

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

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.

UncheckedCheckedIndeterminate

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

Disabled

Checkboxes can also have a disable state.

UncheckedCheckedIndeterminate

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

Required

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

<Checkbox required label="Checkbox" />

InputId

The id of the checkbox element

<Checkbox id="checkbox" label="Checkbox" />

Label

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

Check Box

<Checkbox label="Check Box" />

Custom labels

Checkbox can accept complex labels through the label prop. Make sure to use clear textual labels that are self explanatory in the given context.

// Note: This is just an example of what's possible
// The actual implementation may vary
<Checkbox label="Option 1 with additional help text" />

Event handling

The Checkbox component provides an onChange event handler that is triggered when the checkbox is clicked or its state changes.

const handleChange = (event) => {
  // The event.target.checked property contains the new state (true/false)
  console.log('Checkbox checked:', event.target.checked);
  
  // You can perform actions based on the checkbox state
  if (event.target.checked) {
    console.log('Checkbox was checked');
    // Add item to selected items
    setSelectedItems([...selectedItems, itemId]);
  } else {
    console.log('Checkbox was unchecked');
    // Remove item from selected items
    setSelectedItems(selectedItems.filter(id => id !== itemId));
  }
};

<Checkbox 
  onChange={handleChange} 
  label="Checkbox with event handler" 
/>

The onChange handler receives a standard React change event, where:

• event.target refers to the input element
• event.target.checked contains the new checked state (true when checked, false when unchecked)

Note that when a checkbox is disabled (disabled={true}), the onChange event will not be triggered.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Checkbox with custom shadow

<Checkbox classes="shadow-m-light" label="Checkbox with custom shadow" />

Checkbox Group

CheckboxGroup is a helpful wrapper used to group checkbox elements.

Checkbox 1Checkbox 2Checkbox 3

<CheckboxGroup>
  <Checkbox checked label="Checkbox 1" />
  <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.

Small

Checkbox 1Checkbox 2Checkbox 3

Medium

Checkbox 1Checkbox 2Checkbox 3

Large

Checkbox 1Checkbox 2Checkbox 3

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

API

QtmCheckbox

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
onValueChanged	CustomEvent<{ checked: boolean; }>	Callback fired when the checkbox is clicked. You can pull out the state checkbox by accessing event.detail.checked

QtmCheckboxGroup

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