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

Parent CheckBox

Child CheckBox 1

Child CheckBox 2

Controlled CheckBox

Uncontrolled

Uncontrolled CheckBox 1

Uncontrolled CheckBox 2

Disabled

Disabled CheckBox 1

Disabled CheckBox 2

Checkbox with description

Checkbox with descriptionSingle-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

Checkbox with bodyThis is where custom content goes.

Checkbox with description and body

Checkbox with description and bodySingle-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

Required checkbox

Props

Checkbox

*required
Name	Type	Default	Description
idrequired	string		Id of the checkbox.
aria-label	string		Aria-label of the checkbox.
body	React.ReactNode		Body text of the checkbox
checked	boolean
className	string	''	Additional classes added to the checkbox.
component	React.ElementType	'div'	Sets the input wrapper component to render. Defaults to <div>
description	React.ReactNode		Description text of the checkbox.
isChecked	boolean \| null	false	Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked).
isDisabled	boolean	false	Flag to show if the checkbox is disabled.
isRequired	boolean	false	Flag to show if the checkbox is required.
isValid	boolean	true	Flag to show if the checkbox selection is valid or invalid.
label	React.ReactNode		Label text of the checkbox.
onChange	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void	() => {}	A callback for when the checkbox selection changes.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set 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


	.pf-c-check	--pf-c-check--GridGap	0.25rem 0.5rem
--pf-c-check--GridGap --pf-global--spacer--xs --pf-global--spacer--sm $pf-global--spacer--xs $pf-global--spacer--sm pf-size-prem(4px) pf-size-prem(8px) 0.25rem 0.5rem
	.pf-c-check	--pf-c-check__label--disabled--Color	#6a6e73
--pf-c-check__label--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-check	--pf-c-check__label--Color	#151515
--pf-c-check__label--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-check	--pf-c-check__label--FontWeight	400
--pf-c-check__label--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-check	--pf-c-check__label--FontSize	1rem
--pf-c-check__label--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-check	--pf-c-check__label--LineHeight	1.3
--pf-c-check__label--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-check	--pf-c-check__input--Height	1rem
--pf-c-check__input--Height --pf-c-check__label--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-check	--pf-c-check__input--MarginTop	calc(((1rem * 1.3) - 1rem) / 2)
--pf-c-check__input--MarginTop calc(((--pf-c-check__label--FontSize * --pf-c-check__label--LineHeight) - --pf-c-check__input--Height) / 2) calc(((--pf-global--FontSize--md * --pf-global--LineHeight--sm) - --pf-c-check__label--FontSize) / 2) calc((($pf-global--FontSize--md * $pf-global--LineHeight--sm) - --pf-global--FontSize--md) / 2) calc((($pf-global--FontSize--md * $pf-global--LineHeight--sm) - $pf-global--FontSize--md) / 2) calc(((pf-font-prem(16px) * 1.3) - pf-font-prem(16px)) / 2) calc(((1rem * 1.3) - 1rem) / 2)
	.pf-c-check	--pf-c-check__description--FontSize	0.875rem
--pf-c-check__description--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-check	--pf-c-check__description--Color	#6a6e73
--pf-c-check__description--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-check	--pf-c-check__body--MarginTop	0.5rem
--pf-c-check__body--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-check	--pf-c-check__label-required--MarginLeft	0.25rem
--pf-c-check__label-required--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-check	--pf-c-check__label-required--FontSize	0.875rem
--pf-c-check__label-required--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-check	--pf-c-check__label-required--Color	#c9190b
--pf-c-check__label-required--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.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
--pf-c-check__label--Color --pf-c-check__label--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines