Checkbox

Overview

Checkboxes let users toggle settings on and off within a form.

When to use:

  • Use Checkboxes when users can toggle one or more items in a form.

Implementation

Checkboxes are a stylized input[type="checkbox"] with controllable checked/unchecked states.

Edit the code below to see your changes live!

function Example() {
  const [checked, setChecked] = useState(false);
  const handleChange = () => setChecked(!checked);

  return (
    <Form>
      <FormGroup>
        <Checkbox
          checked={checked}
          label={checked ? 'Checked' : 'Unchecked'}
          onChange={handleChange}
        />
        <Checkbox disabled={true} label="Disabled" />
      </FormGroup>
    </Form>
  );
}

Props

Supports all native <input /> element attributes.

Prop name
Type
Default
Description
label *string | CheckboxLabel

Label to display next to a Checkbox component.

hiddenLabelboolean

Renders Checkbox with a visually hidden label, retains accessibility for screen readers.

isIndeterminateboolean

Styles and sets the checkbox into a indeterminate state. Note that the checked prop will take precedence over isIndeterminate.

descriptionstring | CheckboxDescription

See CheckboxDescription for usage.

badgeBadgeProps

See Badge for usage.

Props ending with * are required

Do's and Don'ts

Do
Use Checkboxes to turn on and off settings within a form.
Group related Checkboxes under input label (h4).
Don't
Apply changes made with the Checkbox right away without additional save action.