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

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

Checkbox exports

You can import this module like so:

import {StatefulCheckbox} from 'baseui/checkbox'

It exports the following components or utility functions: