PatternFly

Radio

A radio button is used to present the user with mutually exclusive choices. Always present radio buttons in groups of 2 or more.

Examples

Controlled

Uncontrolled

Reversed

Label wraps

You can expand the clickable area of a radio so that it spans wider than the radio label by adding the isLabelWrapped property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.

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 wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
componentReact.ElementTypeSets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified.
descriptionReact.ReactNodeDescription text of the radio.
inputClassNamestringAdditional classes added to the radio input.
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 input.
isLabelWrappedbooleanFlag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified.
isValidbooleantrueFlag to show if the radio selection is valid or invalid.
labelReact.ReactNodeLabel text of the radio.
onChange(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void() => {}A callback for when the radio selection changes.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-radio--pf-v5-c-radio--GridGap
0.25rem 0.5rem
.pf-v5-c-radio--pf-v5-c-radio__label--disabled--Color
#6a6e73
.pf-v5-c-radio--pf-v5-c-radio__label--Color
#151515
.pf-v5-c-radio--pf-v5-c-radio__label--FontWeight
400
.pf-v5-c-radio--pf-v5-c-radio__label--FontSize
1rem
.pf-v5-c-radio--pf-v5-c-radio__label--LineHeight
1.5
.pf-v5-c-radio--pf-v5-c-radio__input--TranslateY
calc((1.5 * 1rem / 2 ) - 50%)
.pf-v5-c-radio--pf-v5-c-radio__input--TranslateY--moz
calc((1.5 * 1rem / 2 ) - 50%)
.pf-v5-c-radio--pf-v5-c-radio__input--first-child--MarginLeft
0.0625rem
.pf-v5-c-radio--pf-v5-c-radio__input--last-child--MarginRight
0.0625rem
.pf-v5-c-radio--pf-v5-c-radio__description--FontSize
0.875rem
.pf-v5-c-radio--pf-v5-c-radio__description--Color
#6a6e73
.pf-v5-c-radio--pf-v5-c-radio__body--MarginTop
0.5rem
.pf-v5-c-radio.pf-m-standalone--pf-v5-c-radio--GridGap
0
.pf-v5-c-radio.pf-m-standalone--pf-v5-c-radio__input--TranslateY
none
.pf-v5-c-radio__label:disabled--pf-v5-c-radio__label--Color
#6a6e73

View source on GitHub