Usage

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

Checkbox states

jsx

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

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.

jsx

function ControlledCheckboxExample() {
  const [checked, setChecked] = React.useState(true)
  return (
    <Checkbox
      label="Controlled usage"
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
    />
  )
}