Patternfly Logo

Examples

Controlled

Uncontrolled

Reversed

Label wraps

Disabled

With description

Description

Props

Radio properties
NameTypeRequiredDefaultDescription
aria-labelstringNoAria label for the radio.
checkedbooleanNoFlag to show if the radio is checked.
classNamestringNo''Additional classes added to the radio.
descriptionReact.ReactNodeNoDescription text of the radio.
idstringYesId of the radio.
isCheckedbooleanNoFlag to show if the radio is checked.
isDisabledbooleanNofalseFlag to show if the radio is disabled.
isLabelBeforeButtonbooleanNoFlag to show if the radio label is shown before the radio button.
isLabelWrappedbooleanNoFlag to show if the radio label is wrapped on small screen.
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.

CSS variables

.pf-c-radio--pf-c-radio--GridGap
0.25rem 0.5rem
.pf-c-radio--pf-c-radio__label--disabled--Color
#6a6e73
.pf-c-radio--pf-c-radio__label--Color
#151515
.pf-c-radio--pf-c-radio__label--FontWeight
400
.pf-c-radio--pf-c-radio__label--FontSize
1rem
.pf-c-radio--pf-c-radio__label--LineHeight
1.3
.pf-c-radio--pf-c-radio__input--MarginTop
-0.1875rem
.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--pf-c-radio__description--Color
#6a6e73
.pf-c-radio__label:disabled--pf-c-radio__label--Color
#6a6e73

View source on GitHub