Checkbox

Checkboxes allow users to select or unselect options.

For more information on how to use the features and props for this component, check out the developer documentation.

Checkboxes should be used when displaying less than 7 options to choose from. If you require more than 7 options, consider using a Select field instead. The Checkbox component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.

Use a single Checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the Checkbox as many times as they like. Do not use the Checkbox when a user MUST make an active decision, such as yes or no (use RadioButtons) or if you are expecting the changes to apply instantly (use a Switch).

If there are multiple options to select, wrap the Checkboxes in a CheckboxGroup. By doing so, all of the selections made will belong to the same Form value.

A Checkbox can be set to render as a Card which can be ideal to display large volumes of content within a single wrapper. You can set variant to card on either a Checkbox or a CheckboxGroup.

Checkbox

CheckboxGroup

NameTypeDefaultDescription
checkedbooleanSets checked prop via onChange when using as controlled component.
defaultCheckedbooleanInitialize checked prop when using as uncontrolled component.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
indeterminatebooleanfalse Sets Checkbox to an an indeterminate state.
labelReactNodePass a string or a fragment with an Icon and string.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
requiredbooleanIndicate if the field is required. The browser defaults to false.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.

You can override the styles of the Checkbox component by setting a custom theme on the Configuration component.

Checkbox

{
      •       'border-radius': 'components.form-control.border-radius' // → components.form-control.border-radius
      •     }
    •   }
}

RadioCheck

{
      •       'border-color': 'components.form-control.border-color', // → components.form-control.border-color
      •       'border-width': 'components.form-control.border-width', // → components.form-control.border-width
      •       'background-color': 'components.form-control.background-color', // → components.form-control.background-color
      •       'foreground-color': 'base.palette.interactive', // → base.palette.interactive
        •         color: 'base.palette.foreground-color', // → base.palette.foreground-color
        •         'font-weight': 'base.font-weight.normal' // → base.font-weight.normal
        •       },
      •       size: '1.25rem',
      •       'touch-size': '1.75rem',
        •         'background-color': 'base.palette.interactive', // → base.palette.interactive
        •         'border-color': 'base.palette.interactive' // → base.palette.interactive
        •       }
      •     }
    •   }
}