Skip to Content
Patternfly Logo

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

Checkbox with description

Description

Props

Checkbox properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the Checkbox.
isValidbooleanNotrueFlag to show if the Checkbox selection is valid or invalid.
isDisabledbooleanNofalseFlag to show if the Checkbox is disabled.
isCheckedbooleanNofalseFlag to show if the Checkbox is checked.
checkedbooleanNo
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => {}A callback for when the Checkbox selection changes.
labelReact.ReactNodeNoLabel text of the checkbox.
idstringYesId of the checkbox.
aria-labelstringNoAria-label of the checkbox.
descriptionReact.ReactNodeNoDescription text of the checkbox.

CSS Variables

--pf-c-check__description--Colorc_check__description_Color
#737679
--pf-c-check__description--FontSizec_check__description_FontSize
0.875rem
--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.25rem 0.5rem