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 radio

Copied to clipboard

Uncontrolled radio

Copied to clipboard

Disabled radio

Copied to clipboard

Props

Radio Props

The Radio component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the radio.
idstringId of the radio.
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--GridGapc_radio_GridGap0.5rem
--pf-c-radio__input--MarginTopc_radio__input_MarginTop-0.1875rem
--pf-c-radio__label--Colorc_radio__label_Color#72767b
--pf-c-radio__label--FontSizec_radio__label_FontSize1rem
--pf-c-radio__label--FontWeightc_radio__label_FontWeight400
--pf-c-radio__label--LineHeightc_radio__label_LineHeight1.3
--pf-c-radio__label--disabled--Colorc_radio__label_disabled_Color#72767b