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 > | 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 — 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.
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 — When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN . flexGrow number — When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink number — When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis number | string — When used in a flex layout, specifies the initial main size of the element. See MDN . alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch' — Overrides the alignItems property of a flex or grid container. See MDN . justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — Specifies how the element is justified inside a flex or grid container. See MDN . order number — The layout order for the element within a flex or grid container. See MDN . gridArea string — When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN . gridColumn string — When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow string — When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart string — When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd string — When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart string — When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd string — When used in a grid layout, specifies the ending row to span within the grid. See MDN .
Name Type Default Description margin DimensionValue — The margin for all four sides of the element. See MDN . marginTop DimensionValue — The margin for the top side of the element. See MDN . marginBottom DimensionValue — The margin for the bottom side of the element. See MDN . marginStart DimensionValue — The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd DimensionValue — The margin for the logical end side of an element, depending on layout direction. See MDN . marginX DimensionValue — The margin for both the left and right sides of the element. See MDN . marginY DimensionValue — The margin for both the top and bottom sides of the element. See MDN .
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — Specifies how the element is positioned. See MDN . top DimensionValue — The top position for the element. See MDN . bottom DimensionValue — The bottom position for the element. See MDN . left DimensionValue — The left position for the element. See MDN . Consider using start instead for RTL support. right DimensionValue — The right position for the element. See MDN . Consider using start instead for RTL support. start DimensionValue — The logical start position for the element, depending on layout direction. See MDN . end DimensionValue — The logical end position for the element, depending on layout direction. See MDN . zIndex number — The stacking order for the element. See MDN . isHidden boolean — Hides the element.
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.
Name Type Default Description UNSAFE_className string — Sets the CSS className for the element. Only use as a last resort . Use style props instead. UNSAFE_style CSSProperties — Sets inline style for the element. Only use as a last resort . Use style props instead.
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
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 — When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN . flexGrow number — When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink number — When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis number | string — When used in a flex layout, specifies the initial main size of the element. See MDN . alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch' — Overrides the alignItems property of a flex or grid container. See MDN . justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — Specifies how the element is justified inside a flex or grid container. See MDN . order number — The layout order for the element within a flex or grid container. See MDN . gridArea string — When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN . gridColumn string — When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow string — When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart string — When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd string — When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart string — When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd string — When used in a grid layout, specifies the ending row to span within the grid. See MDN .
Name Type Default Description margin DimensionValue — The margin for all four sides of the element. See MDN . marginTop DimensionValue — The margin for the top side of the element. See MDN . marginBottom DimensionValue — The margin for the bottom side of the element. See MDN . marginStart DimensionValue — The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd DimensionValue — The margin for the logical end side of an element, depending on layout direction. See MDN . marginX DimensionValue — The margin for both the left and right sides of the element. See MDN . marginY DimensionValue — The margin for both the top and bottom sides of the element. See MDN .
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — Specifies how the element is positioned. See MDN . top DimensionValue — The top position for the element. See MDN . bottom DimensionValue — The bottom position for the element. See MDN . left DimensionValue — The left position for the element. See MDN . Consider using start instead for RTL support. right DimensionValue — The right position for the element. See MDN . Consider using start instead for RTL support. start DimensionValue — The logical start position for the element, depending on layout direction. See MDN . end DimensionValue — The logical end position for the element, depending on layout direction. See MDN . zIndex number — The stacking order for the element. See MDN . isHidden boolean — Hides the element.
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.
Name Type Default Description UNSAFE_className string — Sets the CSS className for the element. Only use as a last resort . Use style props instead. UNSAFE_style CSSProperties — Sets inline style for the element. Only use as a last resort . Use style props instead.
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 >
'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.
T & { stopPropagation : ( ) => void ,
continuePropagation : ( ) => void
} See the Styling docs for a visualization of these values.
'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