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

*required
NameTypeDefaultDescription
idrequiredstringId of the radio.
namerequiredstringName for group of radios
aria-labelstringAria label for the radio.
bodyReact.ReactNodeBody of the radio.
checkedbooleanFlag to show if the radio is checked.
classNamestring''Additional classes added to the radio.
descriptionReact.ReactNodeDescription text of the radio.
isCheckedbooleanFlag to show if the radio is checked.
isDisabledbooleanfalseFlag to show if the radio is disabled.
isLabelBeforeButtonbooleanFlag to show if the radio label is shown before the radio button.
isLabelWrappedbooleanFlag to show if the radio label is wrapped on small screen.
isValidbooleantrueFlag to show if the radio selection is valid or invalid.
labelReact.ReactNodeLabel text of the radio.
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => {}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