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<...> |