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

Uncontrolled

Disabled

Props

Checkbox properties
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__input--MarginTopc_check__input_MarginTop
-0.1875rem
--pf-c-check__label--Colorc_check__label_Color
#737679
--pf-c-check__label--disabled--Colorc_check__label_disabled_Color
#737679
--pf-c-check__label--FontSizec_check__label_FontSize
1rem
--pf-c-check__label--FontWeightc_check__label_FontWeight
400
--pf-c-check__label--LineHeightc_check__label_LineHeight
1.3
--pf-c-check--GridGapc_check_GridGap
0.5rem