React

Checkbox

Checkboxes are used to select something. They can be used to reflect a binary setting or for selecting elements to perform an action. Related design guidelines: Data input

ExamplesPropsCSS variables

Examples

Controlled checkbox

Copied to clipboard

Uncontrolled checkbox

Copied to clipboard

Disabled checkbox

Copied to clipboard

Props

Checkbox props

The Checkbox component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the Checkbox.
isValidbooleantrueFlag to show if the Checkbox selection is valid or invalid.
isDisabledbooleanfalseFlag to show if the Checkbox is disabled.
isCheckedbooleanfalseFlag to show if the Checkbox is checked.
checkedboolean
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => {}A callback for when the Checkbox selection changes.
labelReact.ReactNodeLabel text of the checkbox.
idstringId of the checkbox.
aria-labelstringAria-label of the checkbox.

CSS variables

--pf-c-check--GridGapc_check_GridGap0.5rem
--pf-c-check__input--MarginTopc_check__input_MarginTop-0.1875rem
--pf-c-check__label--Colorc_check__label_Color#737679
--pf-c-check__label--FontSizec_check__label_FontSize1rem
--pf-c-check__label--FontWeightc_check__label_FontWeight400
--pf-c-check__label--LineHeightc_check__label_LineHeight1.3
--pf-c-check__label--disabled--Colorc_check__label_disabled_Color#737679