RadioGroup Radio buttons allow users to select a single option from a list of mutually exclusive options.
All possible options are exposed up front for users to compare.
< RadioGroup label = "Favorite pet" >
< Radio value = "dogs" > Dogs< / Radio >
< Radio value = "cats" > Cats< / Radio >
< / RadioGroup >
RadioGroup accepts multiple Radio elements as children.
Each Radio represents an option that can be selected, labeled by its children.
Note: A Radio must be contained within a RadioGroup. If for whatever reason you need to
have a single radio by itself, wrap it in a RadioGroup.
RadioGroup only allows single selection. An initial, uncontrolled value can be provided to the RadioGroup using the defaultValue prop.
Alternatively, a controlled value can be provided using the value prop.
For accessibility, all Radio elements within a RadioGroup automatically receive an aria-checked attribute
reflecting their individual selection status.
< RadioGroup label = "Uncontrolled" defaultValue = "dragon" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
< RadioGroup label = "Controlled" value = "dragon" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
When a visible label isn't being used an aria-label prop is needed to explicitly set the label for the RadioGroup.
Radio elements should always have a visible label.
< RadioGroup aria-label = "Favorite Avatar" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
To internationalize a RadioGroup, a localized string should be set as the child content of the Radio.
For languages that are read right to left (e.g. Hebrew and Arabic), the Radio is placed on the right side of the text.
RadioGroup accepts an onChange prop, which is triggered when a user changes the selected value.
The example below uses onChange to log how the user is interacting with the component.
function Example ( ) {
let [ selected, setSelection] = React . useState ( 'select me' ) ;
return (
< div >
< div > You have selected: { selected} < / div >
< RadioGroup aria-label = "Favorite Avatar" onChange = { value => setSelection ( value) } >
< Radio value = "wizard" >
Wizard
< / Radio >
< Radio value = "dragon" >
Dragon
< / Radio >
< / RadioGroup >
< / div >
) ;
}
RadioGroups can display a validation state to communicate to the user if the current value is invalid.
Implement your own validation logic in your app and pass "invalid" to the RadioGroup via the validationState prop.
< RadioGroup label = "Example Options" validationState = "invalid" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
Name Type Default Description orientation Orientation 'vertical' The axis the Radio Button(s) should align with. isEmphasized boolean — By default, radio buttons are not emphasized (gray).
The emphasized (blue) version provides visual prominence. children ReactElement < RadioProps > | — name string — value string — The current value (controlled). defaultValue string — The default value (uncontrolled). isDisabled boolean — Whether the input is disabled. isRequired boolean — Whether user input is required on the input before form submission.
Often paired with the `necessityIndicator` prop to add a visual indicator to the input. validationState ValidationState "valid" Whether the input should display its "valid" or "invalid" visual styling. isReadOnly boolean — Whether the input can be selected but not changed by the user. autoFocus boolean — Whether the element should receive focus on render label ReactNode — The content to display as the label. labelPosition LabelPosition "top" The label's overall position relative to the element it is labeling. labelAlign Alignment "start" The label's horizontal alignment relative to the element it is labeling. necessityIndicator NecessityIndicator "icon" Whether the required state should be shown as an icon or text. UNSAFE_className string — UNSAFE_style CSSProperties —
Name Type Default Description onChange ( value : string ) => void — Handler that is called when the value changes. onFocus ( e : FocusEvent ) => void — Handler that is called when the element receives focus. onBlur ( e : FocusEvent ) => void — Handler that is called when the element loses focus. onFocusChange ( isFocused : boolean ) => void — Handler that is called when the element's focus status changes. onKeyDown ( e : KeyboardEvent ) => void — Handler that is called when a key is pressed. onKeyUp ( e : KeyboardEvent ) => void — Handler that is called when a key is released.
Name Type Default Description flex string | number | boolean — flexGrow number — flexShrink number — alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' — justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — flexOrder number — gridArea string — gridColumn string — gridRow string — gridColumnStart string — gridColumnEnd string — gridRowStart string — gridRowEnd string — slot string —
Name Type Default Description role string — id string — tabIndex number — aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-controls string — Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-owns string — Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship. aria-hidden boolean | 'false' | 'true' — Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
'horizontal' | 'vertical' Name Type Description value string children ReactNode The label for the Radio. Accepts any renderable node. isDisabled boolean Whether the radio button is disabled or not.
Shows that a selection exists, but is not available in that circumstance. autoFocus boolean Whether the element should receive focus on render onFocus ( e : FocusEvent ) => void Handler that is called when the element receives focus. onBlur ( e : FocusEvent ) => void Handler that is called when the element loses focus. onFocusChange ( isFocused : boolean ) => void Handler that is called when the element's focus status changes. onKeyDown ( e : KeyboardEvent ) => void Handler that is called when a key is pressed. onKeyUp ( e : KeyboardEvent ) => void Handler that is called when a key is released.
ReactFocusEvent < any > & { stopPropagation : ( ) => void ,
continuePropagation : ( ) => void
} ReactKeyboardEvent < any > & { stopPropagation : ( ) => void ,
continuePropagation : ( ) => void
} 'size-0'
| 'size-10'
| 'size-25'
| 'size-40'
| 'size-50'
| 'size-65'
| 'size-75'
| 'size-85'
| 'size-100'
| 'size-115'
| 'size-125'
| 'size-130'
| 'size-150'
| 'size-160'
| 'size-175'
| 'size-200'
| 'size-225'
| 'size-250'
| 'size-300'
| 'size-350'
| 'size-400'
| 'size-450'
| 'size-500'
| 'size-550'
| 'size-600'
| 'size-675'
| 'size-700'
| 'size-800'
| 'size-900'
| 'size-1000'
| 'size-1200'
| 'size-1250'
| 'size-1600'
| 'size-1700'
| 'size-2000'
| 'size-2400'
| 'size-3000'
| 'size-3400'
| 'size-3600'
| 'size-4600'
| 'size-5000'
| 'size-6000'
| 'static-size-0'
| 'static-size-10'
| 'static-size-25'
| 'static-size-50'
| 'static-size-40'
| 'static-size-65'
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-150'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
| 'static-size-250'
| 'static-size-300'
| 'static-size-400'
| 'static-size-450'
| 'static-size-500'
| 'static-size-550'
| 'static-size-600'
| 'static-size-700'
| 'static-size-800'
| 'static-size-900'
| 'static-size-1000'
| 'static-size-1200'
| 'static-size-1700'
| 'static-size-2400'
| 'static-size-2600'
| 'static-size-3400'
| 'static-size-3600'
| 'static-size-4600'
| 'static-size-5000'
| 'static-size-6000'
| 'single-line-height'
| 'single-line-width'
| string
| number Name Type Default Description value string — children ReactNode — The label for the Radio. Accepts any renderable node. isDisabled boolean — Whether the radio button is disabled or not.
Shows that a selection exists, but is not available in that circumstance. autoFocus boolean — Whether the element should receive focus on render UNSAFE_className string — UNSAFE_style CSSProperties —
Name Type Default Description onFocus ( e : FocusEvent ) => void — Handler that is called when the element receives focus. onBlur ( e : FocusEvent ) => void — Handler that is called when the element loses focus. onFocusChange ( isFocused : boolean ) => void — Handler that is called when the element's focus status changes. onKeyDown ( e : KeyboardEvent ) => void — Handler that is called when a key is pressed. onKeyUp ( e : KeyboardEvent ) => void — Handler that is called when a key is released.
Name Type Default Description flex string | number | boolean — flexGrow number — flexShrink number — alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' — justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — flexOrder number — gridArea string — gridColumn string — gridRow string — gridColumnStart string — gridColumnEnd string — gridRowStart string — gridRowEnd string — slot string —
Name Type Default Description role string — id string — tabIndex number — aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-controls string — Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-owns string — Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship. aria-hidden boolean | 'false' | 'true' — Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
ReactFocusEvent < any > & { stopPropagation : ( ) => void ,
continuePropagation : ( ) => void
} ReactKeyboardEvent < any > & { stopPropagation : ( ) => void ,
continuePropagation : ( ) => void
} 'size-0'
| 'size-10'
| 'size-25'
| 'size-40'
| 'size-50'
| 'size-65'
| 'size-75'
| 'size-85'
| 'size-100'
| 'size-115'
| 'size-125'
| 'size-130'
| 'size-150'
| 'size-160'
| 'size-175'
| 'size-200'
| 'size-225'
| 'size-250'
| 'size-300'
| 'size-350'
| 'size-400'
| 'size-450'
| 'size-500'
| 'size-550'
| 'size-600'
| 'size-675'
| 'size-700'
| 'size-800'
| 'size-900'
| 'size-1000'
| 'size-1200'
| 'size-1250'
| 'size-1600'
| 'size-1700'
| 'size-2000'
| 'size-2400'
| 'size-3000'
| 'size-3400'
| 'size-3600'
| 'size-4600'
| 'size-5000'
| 'size-6000'
| 'static-size-0'
| 'static-size-10'
| 'static-size-25'
| 'static-size-50'
| 'static-size-40'
| 'static-size-65'
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-150'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
| 'static-size-250'
| 'static-size-300'
| 'static-size-400'
| 'static-size-450'
| 'static-size-500'
| 'static-size-550'
| 'static-size-600'
| 'static-size-700'
| 'static-size-800'
| 'static-size-900'
| 'static-size-1000'
| 'static-size-1200'
| 'static-size-1700'
| 'static-size-2400'
| 'static-size-2600'
| 'static-size-3400'
| 'static-size-3600'
| 'static-size-4600'
| 'static-size-5000'
| 'static-size-6000'
| 'single-line-height'
| 'single-line-width'
| string
| number A RadioGroup is vertically aligned by default.
An optional prop can be passed to the RadioGroup to position the Radio elements inline.
< RadioGroup label = "Example Options" orientation = "horizontal" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
The default position of a label is on top of the RadioGroup.
An optional prop can be passed to the RadioGroup that will position the label at the start of the topmost Radio.
< RadioGroup label = "Example Options" labelPosition = "side" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
Labels can be aligned to the "start" or the "end" of the RadioGroup.
For left-to-right (LTR) languages, "start" refers to the left most edge of the RadioGroup
and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.
< RadioGroup label = "Example Options" labelAlign = "end" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
View Guidelines
< RadioGroup label = "Example Options" isDisabled >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
< RadioGroup label = "Example Options" >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" isDisabled > Dragon< / Radio >
< / RadioGroup >
The isReadOnly prop makes the selection immutable. Unlike isDisabled, the RadioGroup remains focusable.
See the MDN docs for more information.
< RadioGroup label = "Example Options" defaultValue = "wizard" isReadOnly >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >
View Guidelines
< RadioGroup label = "Example Options" isEmphasized >
< Radio value = "wizard" > Wizard< / Radio >
< Radio value = "dragon" > Dragon< / Radio >
< / RadioGroup >