Radio

A radio is a button that's used to present users with mutually exclusive choices.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-radio	--pf-v6-c-radio--GridGap	0.5rem 0.5rem
--pf-v6-c-radio--GridGap --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-radio	--pf-v6-c-radio--AccentColor	(In light theme) #0066cc
--pf-v6-c-radio--AccentColor --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-radio	--pf-v6-c-radio--m-standalone--MinHeight	calc(0.875rem * 1.5)
--pf-v6-c-radio--m-standalone--MinHeight calc(--pf-v6-c-radio__label--FontSize * --pf-v6-c-radio__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-radio	--pf-v6-c-radio__label--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-radio__label--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-radio	--pf-v6-c-radio__label--Color	(In light theme) #151515
--pf-v6-c-radio__label--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-radio	--pf-v6-c-radio__label--FontWeight	400
--pf-v6-c-radio__label--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-radio	--pf-v6-c-radio__label--FontSize	0.875rem
--pf-v6-c-radio__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-radio	--pf-v6-c-radio__label--LineHeight	1.5
--pf-v6-c-radio__label--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-radio	--pf-v6-c-radio__description--FontSize	0.75rem
--pf-v6-c-radio__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-radio	--pf-v6-c-radio__description--Color	(In light theme) #4d4d4d
--pf-v6-c-radio__description--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-radio	--pf-v6-c-radio__input--first-child--MarginInlineStart	0.0625rem
	.pf-v6-c-radio	--pf-v6-c-radio__input--last-child--MarginInlineEnd	0.0625rem
	.pf-v6-c-radio	--pf-v6-c-radio__body--MarginBlockStart	0.5rem
--pf-v6-c-radio__body--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-radio	--pf-v6-c-radio__input--TranslateY	calc((1.5 * 0.875rem / 2 ) - 50%)
--pf-v6-c-radio__input--TranslateY calc((--pf-v6-c-radio__label--LineHeight * --pf-v6-c-radio__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-radio__label:disabled	--pf-v6-c-radio__label--Color	(In light theme) #a3a3a3
--pf-v6-c-radio__label--Color --pf-v6-c-radio__label--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3