Checkbox

Checkboxes are an easily understandable way to indicate that users can select one or more options from a group, or that a user can make a binary (yes/no) choice. Checkboxes can also be used in the context of bulk actions, where a user might select 2 or more items from a list and then perform an action on all of the items.

Design guidance

When and how to use this

Use checkboxes in cases where users can select multiple options from a group, or when the user needs to make a binary (yes/no) choice, such as accepting or not accepting terms of service in a signup form. You should also use a checkbox in the bulk action use case noted above. For more on bulk action patterns, see the Table documentation.

For these cases, a Checkbox is the best choice—avoid using a Switch for the purpose of selecting options or binary choices outside of global on/off choices in native mobile apps.

When to consider something else

If a user should only select one of a number of options, use a Radio or Select instead of a Checkbox.

For use cases in mobile native apps where the user has a binary choice that globally affects the app (for example, a global setting) that does not require an explicit save, use a Switch.

Figma

For most form-driven use cases, drag in a Checkbox Field Group from the Compositions section in the Form Controls v2 library in the Assets pane in your Figma file. We provide default and error states as well as a required attribute for the field. A Checkbox Field component is nested within, which then nests an atomic Checkbox component inside. To set the checked attribute and state on a button within the Checkbox Field Group, select the nested Checkbox and use Figma’s component property pane to make changes.

Drag in a single Checkbox Field for yes/no use cases like accepting terms. For bulk action cases, you just need a Checkbox, which has an Indeterminate attribute to indicate that some (but ont all) items in the associated list are selected.

You can also drag in a Checkbox Tile Field to match the React TileRadio shown below.

React

Checkbox composes Chakra’s Checkbox. We offer size variants that align with those in TextInput. We also offer a CheckboxGroup that wraps a set of Checkbox components, controls their values, and distributes some common props such as size and isDisabled, and a TileCheckbox that offers a checkbox wrapped in a tile-like element and offers more text styling options.

Checkbox Group

Use a CheckboxGroup for cases where you need a group of associated checkboxes. It uses the same props as the basic Checkbox and applies these across each checkbox in the group. In addition, you can use the defaultValue prop on this component to set a checkbox in the group as checked by default.

Size

Checkbox is available in three sizes and defaults to medium. The size set on CheckboxGroup will be distributed to child Checkbox components.

Tile Checkbox

TileCheckbox allows for both a label as in the standard Checkbox component, but also offers a description prop to set secondary text in the tile. It also offers an isSubtle prop to remove the border of the element in its default state. You can wrap a set of TileCheckbox components in a CheckboxGroup just like the standard Checkbox.

Bootstrap

Bootstrap provides styles for input type=”checkbox” and accompanying label elements, using the .form-check-input and .form-check-label classes wrapped in a div with the class .form-check. Wrap groups of these in a fieldset and use the .form-label class on its legend to achieve the same effect as the React CheckboxGroup.