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.

Usage

Loading examples...

<RadioGroup>

A high-level input with a props interface similar to <Select> that renders multiple radio options.

import RadioGroup from '@nerdwallet/react-radio';
<RadioGroup
name="example"
value="1"
onChange={handleRadioChange}
options={[
{
value: '1',
label: 'Option 1',
},
{
value: '2',
label: 'Option 2',
},
]}
/>

Inline Radios

RadioGroup, by default, has each radio option and label on its own line and inside a gray block. This makes it easy for the user to scan the options and make the right selection. When there are only two simple options (like "Yes" and "No"), you can save space by having both options rendered inline on one line by using the inline prop.

<RadioGroup inline {...} />

Label for <RadioGroup>

You usually want a label for RadioGroup. Use InputGroup to attach a label to RadioGroup.

import InputGroup from '@nerdwallet/react-input-group';
import RadioGroup from '@nerdwallet/react-radio';
<InputGroup
label="Do you own or lease your vehicle?"
input={
<RadioGroup inline {...} />
}
/>

<RadioOption>

A single radio option and label. Like RadioGroup, the option can be rendered in a block or inline. Props are passed down to the underlying <input>.

import { RadioOption } from '@nerdwallet/react-radio';
<RadioOption
inline
label="Yes"
checked={currentlyChecked}
onChange={handleChange}
/>

Similarity with Checkboxes

This component is very similar (both in design and props) to @nerdwallet/react-checkbox. Checkboxes should be used when the user can select one or more options.

Maintainers

This component is maintained by the FEI team.

See Also