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, providing a value prop to the RadioGroup creates a controlled value.
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 >
) ;
}
You have selected: select me
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 '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 < > | — name string — value string — defaultValue string — isDisabled boolean — isRequired boolean — validationState — isReadOnly boolean — autoFocus boolean — label ReactNode — labelPosition — labelAlign — necessityIndicator — UNSAFE_className string — UNSAFE_style CSSProperties —
Name Type Default Description onChange ( value : string ) => void — onFocus ( e : ) => void — onBlur ( e : ) => void — onFocusChange ( isFocused : boolean ) => void — onKeyDown ( e : ) => void — onKeyUp ( e : ) => void —
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 margin — marginTop — marginLeft — marginRight — marginBottom — marginStart — marginEnd — marginX — marginY —
Name Type Default Description width — minWidth — maxWidth — height — minHeight — maxHeight —
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — top — bottom — left — right — start — end — zIndex number — isHidden boolean —
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 onFocus ( e : ) => void onBlur ( e : ) => void onFocusChange ( isFocused : boolean ) => void onKeyDown ( e : ) => void onKeyUp ( e : ) => void
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 — UNSAFE_className string — UNSAFE_style CSSProperties —
Name Type Default Description onFocus ( e : ) => void — onBlur ( e : ) => void — onFocusChange ( isFocused : boolean ) => void — onKeyDown ( e : ) => void — onKeyUp ( e : ) => void —
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 margin — marginTop — marginLeft — marginRight — marginBottom — marginStart — marginEnd — marginX — marginY —
Name Type Default Description width — minWidth — maxWidth — height — minHeight — maxHeight —
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — top — bottom — left — right — start — end — zIndex number — isHidden boolean —
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 >