Checkbox

A checkbox is an input control that allows users to select a single item or multiple items from a list.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-check	--pf-v6-c-check--GridGap	0.5rem 0.5rem
--pf-v6-c-check--GridGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--sm --pf-t--global--spacer--200 --pf-t--global--spacer--200 0.5rem 0.5rem
	.pf-v6-c-check	--pf-v6-c-check--AccentColor	(In light theme) #0066cc
--pf-v6-c-check--AccentColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-check	--pf-v6-c-check--m-standalone--MinHeight	calc(0.875rem * 1.5)
--pf-v6-c-check--m-standalone--MinHeight calc(--pf-v6-c-check__label--FontSize * --pf-v6-c-check__label--LineHeight) calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body) calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200) calc(--pf-t--global--font--size--200 * 1.5) calc(0.875rem * 1.5)
	.pf-v6-c-check	--pf-v6-c-check__label--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-check__label--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-check	--pf-v6-c-check__label--Color	(In light theme) #151515
--pf-v6-c-check__label--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-check	--pf-v6-c-check__label--FontWeight	400
--pf-v6-c-check__label--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-check	--pf-v6-c-check__label--FontSize	0.875rem
--pf-v6-c-check__label--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-check	--pf-v6-c-check__label--LineHeight	1.5
--pf-v6-c-check__label--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-check	--pf-v6-c-check__description--FontSize	0.75rem
--pf-v6-c-check__description--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-check	--pf-v6-c-check__description--Color	(In light theme) #4d4d4d
--pf-v6-c-check__description--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-check	--pf-v6-c-check__label-required--MarginInlineStart	0.25rem
--pf-v6-c-check__label-required--MarginInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-check	--pf-v6-c-check__label-required--FontSize	0.75rem
--pf-v6-c-check__label-required--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-check	--pf-v6-c-check__label-required--Color	(In light theme) #b1380b
--pf-v6-c-check__label-required--Color --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-check	--pf-v6-c-check__input--TranslateY	calc((1.5 * 0.875rem / 2 ) - 50%)
--pf-v6-c-check__input--TranslateY calc((--pf-v6-c-check__label--LineHeight * --pf-v6-c-check__label--FontSize / 2 ) - 50%) calc((--pf-t--global--font--line-height--body * --pf-t--global--font--size--body--default / 2 ) - 50%) calc((--pf-t--global--font--line-height--200 * --pf-t--global--font--size--sm / 2 ) - 50%) calc((1.5 * --pf-t--global--font--size--200 / 2 ) - 50%) calc((1.5 * 0.875rem / 2 ) - 50%)
	.pf-v6-c-check__label:disabled	--pf-v6-c-check__label--Color	(In light theme) #a3a3a3
--pf-v6-c-check__label--Color --pf-v6-c-check__label--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3