Skip to content
Telescope

Checkbox

A form element that enables users to make a binary choice (checked/unchecked).

Features

When to use

Use a single checkbox when users need to confirm an action, provide consent, or acknowledge important information. It can also be used to enable or disable a specific option. Use a Checkbox group when the user can select multiple values from a list of options.

Examples

Information:
We promote usage of this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports advanced use cases such as hint text, help popovers and error messages.

Label

Checkboxes should always be accompanied by a label. Labels should be clear, precise, and intuitive, ensuring that users can easily understand the purpose of the selection.

Required or optional

Mark the minority of form elements in a form as required or optional. This helps users scan the form and understand what is required of them. Type out the word optional or required in the label. E.g. "Per purchase limit (optional)". Don't use asterisks or other symbols.

Error

Provide clear and helpful error messages that guide users toward a solution. Instead of merely stating the problem, ensure the message is specific and actionable. Avoid vague or shaming language.

Error:
You must agree to the terms and conditions

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Disabled

Disable a form element to indicate that it’s currently unavailable. This can be used to maintain layout consistency and communicate that the element may become available later. If the form element will never be available in a given context, leave it out.

Indeterminate

When a checkbox is linked to several other sub-checkboxes who's values aren't all the same, it should show up in an indeterminate state. Clicking or tapping on it once should make it checked and change all sub-checkboxes to selected. A second click or tap should uncheck it and set all the sub-checkboxes to unselected.

Information:

If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.

Best practices

Refer to our Forms guidelines for general advice on forms structure, validation, and more.

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

Related components

  • Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
  • Radio group: A form element that enables users to select a single value from a list of options.
  • Switch: A control used to switch between two states - often on or off.