Radio

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

<RadioGroup
  name="example-default"
  label="Label"
  options={[
    {
      value: '1',
      label: 'Value 1',
    },
  ]}
/>

Selected

<RadioGroup
  name="example-selected"
  label="Label"
  defaultValue="1"
  options={[
    {
      value: '1',
      label: 'Value 1',
    },
  ]}
/>

Disabled

<RadioGroup
  name="example-disabled"
  label="Label"
  disabled
  options={[
    {
      value: '1',
      label: 'Value 1',
    },
  ]}
/>

With image

Label

Value 1

Open in Playroom

<RadioGroup
  name="example-image"
  label="Label"
  options={[
    {
      value: '1',
      label: 'Value 1',
      imageSrc:
        'https://i.pinimg.com/originals/9c/14/93/9c14934b19155b15e8ce99a11561fc1b.png',
    },
  ]}
/>

Show code

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

and([maxLineLength, PropTypes.node]).isRequired