Component size, gzipped: 16kb



Checkboxes are used to provide users with multiple options for selection in a series of options.

When used as a toggle they allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter options. When engaged (on), Base Web toggles are colored and when disengaged (off) they’re grey.

When to use

  • When a collection of options share context.
  • When a user wants to toggle an option on/off.
  • When a user wants to select multiple options.


Basic usage

Multiple lines

Error state

Indeterminate state

Disabled state


Overriding styles

Overriding sub-components

Focus and ref

As a toggle

Stateful (uncontrolled) usage

As with many of our components, there is also an uncontrolled version, StatefulCheckbox, which manages its own state.


Checkbox props

Checkbox exports

You can import this module like so:

import {StatefulCheckbox} from 'baseui/checkbox'

It exports the following components or utility functions: