Checkbox

Use Checkbox to select one or more options of a limited number of choices.
  • Experimental
  • Review pending by accessibility team

Examples

Please use FormControl to display accessible checkboxes in the UI. This Checkbox component is intended only as an ingredient for other custom components, or as a drop-in replacement for native HTML checkboxes outside of form use-cases.

If you intend to use this component as part of another component, it should always be accompanied by a corresponding <label> to improve support for assistive technologies.

The Checkbox component can be used in controlled and uncontrolled modes.

Indeterminate

An indeterminate checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.

Optional border

Apply an optional border using FormControl and hasBorder.

Custom label usage

Component props

Checkbox provides a React alternative to the native HTML <input type="checkbox">.

The component API supports all standard HTML attribute props, while providing some additional behavior as described below.

NameTypeDefaultDescription
checkedbooleanModifies true/false value of the native checkbox
classNamestringSets a custom class
defaultCheckedbooleanChecks the input by default in uncontrolled mode
disabledbooleanModifies the native disabled state of the native checkbox
idstringSets a custom id
indeterminatebooleanApplies an indeterminate state to the checkbox
refReact.RefObjectForward a Ref to the underlying DOM node
validationStatus'error'
'success'
Ussed to inform ARIA attributes. Individual checkboxes do not have validation styles.

Additional props can be passed to the <input> element. See MDN for a list of props accepted by the <input> element.