Skip to Content
Patternfly Logo

Radio

Radio buttons are used to present the user with mutually exclusive choices. Radio buttons must always be presented in a group of two or more. Related design guidelines: Data input

ExamplesPropsCSS Variables

Examples

Controlled

Uncontrolled

Reversed

Label wraps

Disabled

With description

Description

Props

Radio properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the radio.
idstringYesId of the radio.
isLabelWrappedbooleanNoFlag to show if the radio label is wrapped on small screen.
isLabelBeforeButtonbooleanNoFlag to show if the radio label is shown before the radio button.
checkedbooleanNoFlag to show if the radio is checked.
isCheckedbooleanNoFlag to show if the radio is checked.
isDisabledbooleanNofalseFlag to show if the radio is disabled.
isValidbooleanNotrueFlag to show if the radio selection is valid or invalid.
labelReact.ReactNodeNoLabel text of the radio.
namestringYesName for group of radios
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => {}A callback for when the radio selection changes.
aria-labelstringNoAria label for the radio.
descriptionReact.ReactNodeNoDescription text of the radio.

CSS Variables

--pf-c-radio__description--Colorc_radio__description_Color
#737679
--pf-c-radio__description--FontSizec_radio__description_FontSize
0.875rem
--pf-c-radio__input--MarginTopc_radio__input_MarginTop
-0.1875rem
--pf-c-radio__label--Colorc_radio__label_Color
#737679
--pf-c-radio__label--disabled--Colorc_radio__label_disabled_Color
#737679
--pf-c-radio__label--FontSizec_radio__label_FontSize
1rem
--pf-c-radio__label--FontWeightc_radio__label_FontWeight
400
--pf-c-radio__label--LineHeightc_radio__label_LineHeight
1.3
--pf-c-radio--GridGapc_radio_GridGap
0.25rem 0.5rem