PatternFly

Checkbox

A checkbox is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting.

Examples

Controlled

Uncontrolled

Reversed

Label wraps

You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the isLabelWrapped property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.

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

Expand or collapse columnSelectorVariableValue
.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