Skip to content

Radio

Status: Stable

Latest released: January 2020

Current version: v10.9.0

Storybook
GitHub

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

Label

Selected

Label

Disabled

Label

With image

Label

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>

Required

A list of radio options.

Array<{

/**

A component rendering an image.

*/

image: node

/**

A path to an image resource.

*/

imageSrc: string
label: node Required
value: string | number | bool Required
}>

value

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

Custom validator function
and([maxLineLength, PropTypes.node]).isRequired

alignRadioTop

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.