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.
isValidbooltrueFlag to show if the Radio selection is valid or invalid.
isDisabledboolfalseFlag to show if the Radio is disabled.
isCheckedboolnullFlag to show if the Radio is checked.
onChangefunc() => undefinedA callback for when the Radio selection changes.
labelnodeundefinedLabel text of the Radio.
idstringId of the Radio.
aria-labelcustomAria-label of the Radio.
namestringName for group of Radios
anyAdditional props are spread to the container <input>

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