Skip to content
Patternfly Logo

Radio

Examples

Controlled

Uncontrolled

Reversed

Label wraps

Disabled

With description

Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.

With body

This is where custom content goes.

With description and body

Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.This is where custom content goes.

Standalone input

Props

Radio

NameTypeRequiredDefaultDescription
aria-labelstringNoAria label for the radio.
bodyReact.ReactNodeNoBody of 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--Height
calc(1rem * 1.3)
.pf-c-radio--pf-c-radio__input--MarginTop
calc(-1px * (1.3 * 1.25))
.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--pf-c-radio__body--MarginTop
0.5rem
.pf-c-radio.pf-m-standalone--pf-c-radio--GridGap
0
.pf-c-radio.pf-m-standalone--pf-c-radio__input--Height
auto
.pf-c-radio.pf-m-standalone--pf-c-radio__input--MarginTop
0
.pf-c-radio__label:disabled--pf-c-radio__label--Color
#6a6e73

View source on GitHub