Checkbox

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

Checkbox basic usage

Checkbox uncontrolled usage

Checkbox multiline example

Checkbox with error

Checkbox indeterminate state

Checkbox disabled example

Checkbox alignment example

Checkbox with overrides

Checkbox with component overrides

Checkbox focus with button

Checkbox as a toggle


Overrides

Additionally, you can fully customize any part of the Checkbox through the overrides prop. The Checkbox consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:


Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Checkbox API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Checkbox API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Checkbox Container API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>