Radio

Allows the user to choose only one of a predefined set of mutually exclusive options.

import * as React from 'react';
import { Radio } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Radio name='Options' label='Option 1' defaultChecked />
      <Radio name='Options' label='Option 2' />
      <Radio name='Options' label='Option 3' disabled />
    </div>
  );
};

A radio button unlike checkboxes, permit selection of a single item within a set. Use radio buttons when the user is required to make a choice in a list with only one selection allowed. For example, a list where the user can only answer with yes or no.

A radio is not interchangeable with a checkbox. A radio must have at minimum 2 choice options and only one option can be checked. A checkbox, however, can have as many or as few items checked, and can be displayed as standalone or within a group of two or more.

Statuses

If you ever need to display the status or severity of a single radio, you can apply a status on the radio. Before doing so, consider if using an input group with a status message makes more sense.

import * as React from 'react';
import { Radio } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Radio name='Options' label='Default' />
      <Radio name='Options' label='Positive' status='positive' />
      <Radio name='Options' label='Warning' status='warning' />
      <Radio name='Options' label='Negative' status='negative' />
    </div>
  );
};

Props