Component size, gzipped: 17kb

Checkbox

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

NameTypeDescription
autoFocus
If true the component will be focused on the first mount.
checked
Renders component in checked state.
checkmarkType
Renders component in a toggle state.
children
The React Nodes displayed next to the checkbox.
disabled
Renders component in disabled state.
error
Renders component in error state.
inputRef
A ref to access an input element.
isIndeterminate
Indicates indeterminate state for the checkmark. Checked property is ignored.
labelPlacement
Determines how to position the label relative to the checkbox.
name
Name attribute.
onBlur
Called the onBlur event triggers.
onChange
Called when checkbox value is changed.
onFocus
Called the onFocus event triggers.
onMouseDown
Called when mouseDown triggers.
onMouseEnter
Called when mouseEnter triggers.
onMouseLeave
Called when mouseLeave triggers.
overrides
Lets you customize all aspects of the component.
required
Renders component in required state.
title
Title attribute.

Checkbox exports

You can import this module like so:

import {StatefulCheckbox} from 'baseui/checkbox'

It exports the following components or utility functions: