Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Checkboxes are used to present the user with a range of options, from which the user may select any number of options to complete their task. Within a group of checkboxes, each operates individually, so the user can check or uncheck options independently.

Design Tips


"Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others" (NN Group)

import Checkbox from '@get-bridge/bridge-ui-components.checkbox'

With State

Checkboxes are stateless by default. In many cases, you'll need to implement your own state management.

Text Label

A text label is often used alongside a checkbox to describe the option being selected.


Checkboxes most commonly appear in the default small size of 20px (1.25rem). A large size of 32px (2rem) is also available.

Best Practices

BUC Link