Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (105 sloc) 3.79 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Basic from 'examples/checkbox/basic-controlled.js'; import Uncontrolled from 'examples/checkbox/basic-uncontrolled'; import Multiline from 'examples/checkbox/multiline.js'; import Error from 'examples/checkbox/error.js'; import Indeterminate from 'examples/checkbox/indeterminate.js'; import Disabled from 'examples/checkbox/disabled.js'; import Alignment from 'examples/checkbox/alignment.js'; import Customization from 'examples/checkbox/overrides.js'; import ComponentOverrides from 'examples/checkbox/component-overrides.js'; import Focus from 'examples/checkbox/focus.js'; import Toggle from 'examples/checkbox/toggle.js';

import Overrides from '../../components/overrides'; import {Block} from 'baseui/block'; import {StatefulCheckbox, STYLE_TYPE} from 'baseui/checkbox'; import * as CheckboxExports from 'baseui/checkbox';

export default Layout;


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.


<Example title="Overriding sub-components" path="checkbox/component-overrides.js"

<Example title="Stateful (uncontrolled) usage" path="checkbox/basic-uncontrolled.js"

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


<Overrides name="Checkbox" component={CheckboxExports} renderExample={props => ( Check Label
Toggle Label )} />

<API heading="Checkbox API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/checkbox/checkbox.js')} />

<API heading="Stateful Checkbox API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/checkbox/stateful-checkbox.js')} />

<API heading="Stateful Checkbox Container API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/checkbox/stateful-checkbox-container.js')} />

You can’t perform that action at this time.