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

Prop name
Type
Default
Description
text *string

Description to display below Label

linkCheckboxDescriptionLink

See CheckboxDescriptionLink 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.