Skip to Content

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

Prop Description Default
label
Label of the radio.
ReactNode
status
Status of the radio.
"positive" | "warning" | "negative"
labelProps
Passes props to Radio label.
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
wrapperProps
Passes props to Radio wrapper.
DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>
as
"symbol" | "object" | "input" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | FunctionComponent<...>