React

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

Props

Radio properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the radio.
idstringId of the radio.
isLabelWrappedbooleanFlag to show if the radio label is wrapped on small screen.
isLabelBeforeButtonbooleanFlag to show if the radio label is shown before the radio button.
checkedbooleanFlag to show if the radio is checked.
isCheckedbooleanFlag to show if the radio is checked.
isDisabledbooleanfalseFlag to show if the radio is disabled.
isValidbooleantrueFlag to show if the radio selection is valid or invalid.
labelReact.ReactNodeLabel text of the radio.
namestringName for group of radios
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidFunction.prototypeA callback for when the radio selection changes.
aria-labelstringAria label for the radio.

CSS Variables

--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.5rem