Skip to content
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

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 will be a div element if isLabelWrapped is true, otherwise this will be a label element.
descriptionReact.ReactNodeDescription text of the radio.
inputClassNamestringAdditional classed 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 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(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

SelectorVariableValue
.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--moz
5px
.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--moz
0
.pf-v5-c-radio__label:disabled--pf-v5-c-radio__label--Color
#6a6e73

View source on GitHub
Red Hat
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines