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
With image
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.
Development
import RadioGroup from '@nerdwallet/react-radio';<RadioGroup />;Props
<RadioGroup>
options
Array<Object>
A list of radio options.
/**
A component rendering an image.
*/
image: node/**
A path to an image resource.
*/
imageSrc: stringvalue
string | number | boolean
The currently selected value(s).
onChange
Function
Callback to be called when the selected value(s) change.
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").
name
string
Name attribute for <input> elements.
defaultValue
string | number | boolean
Initial value when state is uncontrolled.
disabled
boolean
Flag to indicate if the radio options should not be selectable.
error
boolean
Show the radio group in an error visual state.
label
string
Optional label for the radio group.
alignRadioTop
boolean
Boolean flag to top-align the radio button when the radio text spans multiple lines.
errorMessage
node
Optional text to be shown indicating the user is in an error state.
helpMessage
node
Optional help text shown below the radio group.
tooltip
node
Optional tooltip shown via an icon next to the label.
tooltipPlacement
'top' | 'right' | 'bottom' | 'left'
Positioning of tooltip.
className
string
Classes to add to the containing element.
<RadioOption>
className
string
disabled
boolean
id
string
image
node
A component rendering an image.
imageSrc
string
A path to an image resource.
inline
boolean
label
custom
and([maxLineLength, PropTypes.node]).isRequiredalignRadioTop
boolean
Boolean flag to top-align the radio button when the radio text spans multiple lines.
dangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.