Skip to content
Patternfly Logo

Checkbox

Examples

Controlled

Uncontrolled

Disabled

Checkbox with description

Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.

Checkbox with body

This is where custom content goes.

Checkbox with description and body

Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.This is where custom content goes.

Standalone input

Props

Checkbox

NameTypeRequiredDefaultDescription
aria-labelstringNoAria-label of the checkbox.
bodyReact.ReactNodeNoBody text 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
calc(-1px * (1.3 * 1.25))
.pf-c-check--pf-c-check__input--Height
calc(1rem * 1.3)
.pf-c-check--pf-c-check__description--FontSize
0.875rem
.pf-c-check--pf-c-check__description--Color
#6a6e73
.pf-c-check--pf-c-check__body--MarginTop
0.5rem
.pf-c-check.pf-m-standalone--pf-c-check--GridGap
0
.pf-c-check.pf-m-standalone--pf-c-check__input--Height
auto
.pf-c-check.pf-m-standalone--pf-c-check__input--MarginTop
0
.pf-c-check__label:disabled--pf-c-check__label--Color
#6a6e73

View source on GitHub