Checkbox

Checkboxes allow the user to select one or more items from a list or set.

Overview

Resources

Variations

Use checkboxes to allow users to select multiples from a limited set of options, or to select one individual item.

Individual checkbox

Use whenever a checkbox is on its own (such as a setting) or when checkboxes are not closely related and are not grouped together under a group label. This is the medium, or default, size of the checkbox.

import { Checkbox } from '@camp/checkbox'
 
<Checkbox label="Unchecked" />
<Checkbox label="Checked" checked />
// The indeterminate checkbox must be controlled, so `checked` and `onChange` are required
<Checkbox label="Indeterminate" indeterminate checked={checked} onChange={handleChange} />
<Checkbox label="Disabled" disabled />

Large checkbox

Today, the large checkbox’s use case is limited. Use the large checkbox within the canvas of builder experiences, such as the Automations builder, when selection is a primary action in the user flow. The large checkbox isn’t currently applied with a label in the platform, though a label can be applied to it. To use the large checkbox, set the size prop to large. Large checkbox shares all the same properties as the default checkbox.

import { Checkbox } from '@camp/checkbox'
 
<Checkbox size="large" label="Unchecked" />
<Checkbox size="large" label="Checked" checked />
// The indeterminate checkbox must be controlled, so `checked` and `onChange` are required
<Checkbox size="large" label="Indeterminate" indeterminate checked={checked} onChange={handleChange} />
<Checkbox size="large" label="Disabled" disabled />

Indeterminate checkbox

The indeterminate checkbox is an appearance option that can be used to mask the current state of the checkbox. The most common use case for using the indeterminate appearance is for a parent checkbox that has children checkboxes with mixed state (some checked, some not).

Developers are responsible for deriving when it is appropriate to render an indeterminate state. The Camp checkbox will maintain its indeterminate styles regardless of the underlying checkbox state. To reveal the current state of the checkbox, simply reset the appearance prop. Please note that the underlying state of the checkbox is maintained for all user interactions.

The indeterminate checkbox must be controlled, so checked and onChange are required in order to render the indeterminate state.

import { Checkbox } from '@camp/checkbox'
 
<Checkbox
  label="Size default"
  indeterminate
  checked={checked}
  onChange={handleChange}
/>
 
<Checkbox
  label="Size default"
  indeterminate
  checked={checked}
  onChange={handleChange}
  disabled
/>
 
<Checkbox
  label="Size large"
  size="large"
  indeterminate
  checked={checked}
  onChange={handleChange}
/>
 
<Checkbox
  label="Size large"
  size="large"
  indeterminate
  checked={checked}
  onChange={handleChange}
  disabled
/>

Disabled checkbox

A disabled checkbox is a checkbox that is not interactive. It is used to indicate that a checkbox is not available for interaction. A disabled checkbox can be checked or unchecked.

import { Checkbox } from '@camp/checkbox'
 
<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled checked />

Required checkbox

A required checkbox is a checkbox that is required to be checked before a form can be submitted.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="Required" required />;

Value

The value prop can optionally be used to set the value of the native checkbox input for use within a form.

import { Checkbox } from '@camp/checkbox';
 
<Checkbox label="I agree to the terms and conditions" value="terms_approved" />;

Controlled checkbox

Checkbox can be used as a controlled component by passing in both the checked and onChange props. This is required if the checkbox should be rendered in an indeterminate state.

import { useState } from 'react';
import { Checkbox } from '@camp/checkbox';
 
...
 
const [checked, setChecked] = useState(false);
 
const handleChange = () => {
  setChecked(!checked);
};
 
<Checkbox
  label="Controlled"
  checked={checked}
  onChange={handleChange}
/>

Usage

Best practices

• Checkboxes should act independently, and the selection or deselection of a checkbox does not affect the selection status of others in the list. The exception to this rule would be a bulk selection checkbox the clearly acts as a bulk select or deselection tool for all items in the list.
• When grouped, checkboxes should be in some logical order that makes it easy for the user to read and understand, whether that is numerical or alphabetical or some other contextually-based grouping.
• Multiple checkboxes should always be displayed vertically, even if not in a grouping.
• Checkbox groupings are perfect for 10 or less options. If there are more to choose from, use a multi-select dropdown instead.

Content guidelines

Checkbox labels should be clearly written, in sentence case and avoiding punctuation at the end.

Accessibility

Keyboard support

• Move focus to each checkbox using the tab key, or shift + tab to move backwards
• To interact with the checkbox when it has keyboard focus, press the space key

Similar components

Radio Button

Allows the user to select one option from a set.

Dropdown

Allows users to select an option from a dropdown menu.