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

<Checkbox size="small" inputProps={{ defaultChecked: true }}>
  Small
</Checkbox>
<Checkbox size="medium" inputProps={{ defaultChecked: true }}>
  Medium
</Checkbox>
<Checkbox size="large" inputProps={{ defaultChecked: true }}>
  Large
</Checkbox>

Selection

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

UncheckedCheckedIndeterminate

<Checkbox>Unchecked</Checkbox>
<Checkbox inputProps={{ defaultChecked: true }}>Checked</Checkbox>
<Checkbox indeterminate>Indeterminate</Checkbox>

Colors

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

UncheckedCheckedIndeterminate

Unchecked

Checked

Indeterminate

<Checkbox color="primary">Unchecked</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

<Checkbox error>Unchecked</Checkbox> ...

Disabled

Checkboxes can also have a disable state.

Unchecked

Checked

Indeterminate

<Checkbox disabled>Unchecked</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 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.

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

<input> attributes

You can apply any standard <input> attributes (e.g., id, name, required, etc.) to the inner <input type="checkbox"> of the Checkbox component by using the inputProps prop.

<Checkbox inputProps={{
    id: "checkbox-1",
    name: "checkbox-1",
    required: true
  }}
/>

Checkbox Group

CheckboxGroup is a helpful wrapper used to group checkbox elements.

Checkbox 1Checkbox 2Checkbox 3

<CheckboxGroup>
  <Checkbox inputProps={{ defaultChecked: true }}>Checkbox 1</Checkbox>
  <Checkbox>Checkbox 2</Checkbox>
  <Checkbox>Checkbox 3</Checkbox>
</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 inputProps={{ defaultChecked: true }}>Checkbox 1</Checkbox>
  ...
</CheckboxGroup>
...

API

Checkbox

The Checkbox component accepts all the props a standard <label> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.LabelHTMLAttributes<HTMLLabelElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

CheckboxGroup

The CheckboxGroup component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...