Skip to content
Patternfly Logo

Examples

Controlled

Uncontrolled

Disabled

Checkbox with description

Description

Props

Checkbox

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

CSS variables

.pf-c-check--pf-c-check--GridGap
0.25rem 0.5rem
.pf-c-check--pf-c-check__label--disabled--Color
#6a6e73
.pf-c-check--pf-c-check__label--Color
#151515
.pf-c-check--pf-c-check__label--FontWeight
400
.pf-c-check--pf-c-check__label--FontSize
1rem
.pf-c-check--pf-c-check__label--LineHeight
1.3
.pf-c-check--pf-c-check__input--MarginTop
-0.1875rem
.pf-c-check--pf-c-check__description--FontSize
0.875rem
.pf-c-check--pf-c-check__description--Color
#6a6e73
.pf-c-check__label:disabled--pf-c-check__label--Color
#6a6e73

View source on GitHub