Radio

Status: Stable

Latest released: January 2020

Current version: v10.7.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

Development

import RadioGroup from '@nerdwallet/react-radio';
<RadioGroup />;

Props

<RadioGroup>

options

Array<Object>

Required

A list of radio options (value and label).

Array<{
value: string | number | bool Required
label: node Required
}>

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

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

dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.

Default

false

dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.

Default

false