PatternFly

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

Required input

Props

Checkbox

*required
NameTypeDefaultDescription
idrequiredstringId of the checkbox.
aria-labelstringAria-label of the checkbox.
bodyReact.ReactNodeBody text of the checkbox
checkedboolean
classNamestring''Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
componentReact.ElementTypeSets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified.
descriptionReact.ReactNodeDescription text of the checkbox.
inputClassNamestringAdditional classes added to the checkbox input.
isCheckedboolean | nullfalseFlag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked).
isDisabledbooleanfalseFlag to show if the checkbox is disabled.
isLabelBeforeButtonbooleanFlag to show if the checkbox label is shown before the checkbox input.
isLabelWrappedbooleanfalseFlag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified.
isRequiredbooleanfalseFlag to show if the checkbox is required.
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid.
labelReact.ReactNodeLabel text of the checkbox.
onChange(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void() => {}A callback for when the checkbox selection changes.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables

SelectorVariableValue
.pf-v5-c-check--pf-v5-c-check--GridGap
0.25rem 0.5rem
.pf-v5-c-check--pf-v5-c-check__label--disabled--Color
#6a6e73
.pf-v5-c-check--pf-v5-c-check__label--Color
#151515
.pf-v5-c-check--pf-v5-c-check__label--FontWeight
400
.pf-v5-c-check--pf-v5-c-check__label--FontSize
1rem
.pf-v5-c-check--pf-v5-c-check__label--LineHeight
1.5
.pf-v5-c-check--pf-v5-c-check__input--TranslateY
calc((1.5 * 1rem / 2 ) - 50%)
.pf-v5-c-check--pf-v5-c-check__input--TranslateY--moz
calc((1.5 * 1rem / 2 ) - 50%)
.pf-v5-c-check--pf-v5-c-check__description--FontSize
0.875rem
.pf-v5-c-check--pf-v5-c-check__description--Color
#6a6e73
.pf-v5-c-check--pf-v5-c-check__body--MarginTop
0.5rem
.pf-v5-c-check--pf-v5-c-check__label-required--MarginLeft
0.25rem
.pf-v5-c-check--pf-v5-c-check__label-required--FontSize
0.875rem
.pf-v5-c-check--pf-v5-c-check__label-required--Color
#c9190b
.pf-v5-c-check.pf-m-standalone--pf-v5-c-check--GridGap
0
.pf-v5-c-check.pf-m-standalone--pf-v5-c-check__input--TranslateY
none
.pf-v5-c-check__label:disabled--pf-v5-c-check__label--Color
#6a6e73

View source on GitHub