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!

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.

imgImgProps

Renders a thumbnail between the Checkbox and its label, sized 40×40 by default, and vertically centers the row. See ImgProps 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.