Checkbox

View on GitHub

Introduction

The Checkbox component maps to a checkbox input and a label.

Checkbox states

<Pane>
  <Checkbox label="Checkbox default" />
  <Checkbox checked label="Checkbox checked" />
  <Checkbox disabled label="Checkbox disabled" />
  <Checkbox disabled checked label="Checkbox checked disabled" />
  <Checkbox indeterminate label="Checkbox indeterminate" />
  <Checkbox checked indeterminate label="Checkbox checked indeterminate" />
</Pane>
code Hide code

Controlled usage

The Checkbox component passes on the original event through the onChange handler. Use e.target.checked to get the latest value and update state accordingly.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ checked: true }}>
  {({ state, setState }) => (
    <Checkbox
      label="Controlled usage"
      checked={state.checked}
      onChange={e => setState({ checked: e.target.checked })}
    />
  )}
</Component>
code Hide code

Add margins

<Checkbox
  label="Add margins"
  checked
  marginBottom={40}
/>
code Hide code

Checkbox Props

This component composes ui-box

idstring
The id attribute of the checkbox.
namestring
The id attribute of the radio.
labelnode
Label of the checkbox.
valuestring
The value attribute of the radio.
checkedbool = false
The checked attribute of the radio.
indeterminatebool = false
State in addition to "checked" and "unchecked". When true, the radio displays a "minus" icon.
onChangefunc = () => {}
Function called when state changes.
disabledbool
When true, the radio is disabled.
isInvalidbool
When true, the aria-invalid attribute is true. Used for accessibility.
appearancestring = 'default'
The appearance of the checkbox. The default theme only comes with a default style.
themeobjectrequired
Theme provided by ThemeProvider.