Checkbox & CheckboxTile

Checkboxes should be used to select from a group of boolean options when more than one option can be selected at a time. If using a checkbox with no label, be sure to add an aria-label="label text attribute so that users of assistive technologies can make sense of it.

React

Vanilla

<FormCheckbox>label</FormCheckbox>

States

The checkbox supports the following modifiers. Note that the valid and invalid classNames are added to the input wrapper rather than the input itself.

React

Vanilla

<FormCheckbox>default</FormCheckbox>
<FormCheckbox checked>checked</FormCheckbox>
<FormCheckbox disabled>disabled</FormCheckbox>
<FormCheckbox disabled checked>disabled checked</FormCheckbox>
<FormCheckbox valid={false}>invalid (pending review)</FormCheckbox>
<FormCheckbox valid={false} checked>invalid checked (pending review)</FormCheckbox>

Checkbox Tiles

Tiled checkboxes offer a bigger touchable area. Note that in this case the label element has to be inserted explicitly as a child. To lay the tiles out you can use a FormGroup with the tile boolean prop modifier.

States

React

Vanilla

<FormGroup tile>
  <FormCheckboxTile>
    <IconPizza />
    <span className="ef-boolean__label">default</span>
  </FormCheckboxTile>
</FormGroup>

Stacked Layout

Use the FormGroup wrapper component with the tile AND stack boolean prop modifiers to make the most of the stacked layout.

React

Vanilla

<FormGroup tile stack>
    <FormCheckboxTile>
        <IconPizza />
        <span className="ef-boolean__label">default</span>
    </FormCheckboxTile>
</FormGroup>