Component size, gzipped: 16kb

Checkbox

Loading
API

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.

Examples

Basic usage

Multiple lines

Error state

Indeterminate state

Disabled state

Alignments

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.

API

Checkbox props

Checkbox exports

You can import this module like so:

import {StatefulCheckbox} from 'baseui/checkbox'

It exports the following components or utility functions: