Radios collect user input to influence or change their experience. This option is great for exposing all available options. Users can select a single option from the list.
Best practices
- Use a balance of radio, card select, and select components to help users make choices and provide info with ease.
- Radios always display within a block to clearly define options and define the target area of each option.
Variants
Default
Selected
Disabled
Development
import RadioGroup from '@nerdwallet/react-radio';<RadioGroup />;Accessibility
The component is built with accessible markup and is accessible by via screen reader and keyboard in modern browsers.
Groups of radio buttons are identified by their name attribute. Care should be taken to avoid duplicate name props to different <RadioGroup> components on the same page. If two sets of radio buttons share the same name, keyboard navigation will behave unexpectedly.
Props
<RadioGroup>
options
Array<Object>
A list of radio options (value and label).
Array<{value
string | number | boolean
The currently selected value(s).
Default
null
onChange
Function
Callback to be called when the selected value(s) change.
Default
() => {}inline
boolean
Whether options should be rendered inline on one line (block by default). This should only be used when there are only two simple options (like "Yes" and "No").
Default
false
name
string
Name attribute for <input> elements.
Default
null
defaultValue
string | number | boolean
Initial value when state is uncontrolled.
Default
null
disabled
boolean
Flag to indicate if the radio options should not be selectable.
Default
false
error
boolean
Show the radio group in an error visual state.
Default
null
label
string
Optional label for the radio group.
Default
null
errorMessage
node
Optional text to be shown indicating the user is in an error state.
Default
null
helpMessage
node
Optional help text shown below the radio group.
Default
null
tooltip
node
Optional tooltip shown via an icon next to the label.
Default
null
tooltipPlacement
'top' | 'right' | 'bottom' | 'left'
Positioning of tooltip.
Default
null
className
string
Classes to add to the containing element.
Default
null
<RadioOption>
className
string
Default
null
disabled
boolean
Default
false
id
string
Default
null
inline
boolean
Default
false
label
custom
and([maxLineLength, PropTypes.node]).isRequireddangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
Default
false
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.
Default
false