Radio

A radio button is used to present the user with mutually exclusive choices. Always present radio buttons in groups of 2 or more.

Examples

Controlled

Controlled Radio

Uncontrolled

Uncontrolled radio example

Reversed

Reversed radio example

Label wraps

Label wraps input example

Disabled

Disabled radio example

Disabled and checked radio example

With description

Radio with description exampleSingle-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.

With body

Radio with bodyThis is where custom content goes.

With description and body

Radio 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

Props

Radio

*required
Name	Type	Default	Description
idrequired	string		Id of the radio.
namerequired	string		Name for group of radios
aria-label	string		Aria label for the radio.
body	React.ReactNode		Body of the radio.
checked	boolean		Flag to show if the radio is checked.
className	string	''	Additional classes added to the radio.
description	React.ReactNode		Description text of the radio.
isChecked	boolean		Flag to show if the radio is checked.
isDisabled	boolean	false	Flag to show if the radio is disabled.
isLabelBeforeButton	boolean		Flag to show if the radio label is shown before the radio button.
isLabelWrapped	boolean		Flag to show if the radio label is wrapped on small screen.
isValid	boolean	true	Flag to show if the radio selection is valid or invalid.
label	React.ReactNode		Label text of the radio.
onChange	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void	() => {}	A callback for when the radio selection changes.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean		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-radio	--pf-c-radio--GridGap	0.25rem 0.5rem
--pf-c-radio--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-radio	--pf-c-radio__label--disabled--Color	#6a6e73
--pf-c-radio__label--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-radio	--pf-c-radio__label--Color	#151515
--pf-c-radio__label--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-radio	--pf-c-radio__label--FontWeight	400
--pf-c-radio__label--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-radio	--pf-c-radio__label--FontSize	1rem
--pf-c-radio__label--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-radio	--pf-c-radio__label--LineHeight	1.3
--pf-c-radio__label--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-radio	--pf-c-radio__input--Height	1rem
--pf-c-radio__input--Height --pf-c-radio__label--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-radio	--pf-c-radio__input--MarginTop	calc(((1rem * 1.3) - 1rem) / 2)
--pf-c-radio__input--MarginTop calc(((--pf-c-radio__label--FontSize * --pf-c-radio__label--LineHeight) - --pf-c-radio__input--Height) / 2) calc(((--pf-global--FontSize--md * --pf-global--LineHeight--sm) - --pf-c-radio__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-radio	--pf-c-radio__input--first-child--MarginLeft	0.0625rem
	.pf-c-radio	--pf-c-radio__input--last-child--MarginRight	0.0625rem
	.pf-c-radio	--pf-c-radio__description--FontSize	0.875rem
--pf-c-radio__description--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-radio	--pf-c-radio__description--Color	#6a6e73
--pf-c-radio__description--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-radio	--pf-c-radio__body--MarginTop	0.5rem
--pf-c-radio__body--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-radio.pf-m-standalone	--pf-c-radio--GridGap	0
	.pf-c-radio.pf-m-standalone	--pf-c-radio__input--Height	auto
	.pf-c-radio.pf-m-standalone	--pf-c-radio__input--MarginTop	0
	.pf-c-radio__label:disabled	--pf-c-radio__label--Color	#6a6e73
--pf-c-radio__label--Color --pf-c-radio__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