Skip to main content

Radio

An input which allows users to select one or more options from a list of options.

http://localhost:3000
<RadioGroup aria-label="account type">
  <Radio value="shipper">Shipper</Radio>
  <Radio value="carrier">Carrier</Radio>
</RadioGroup>

Usage​

Orientation​

Set the orientation prop to adjust the layout of the radio options.

http://localhost:3000
<RadioGroup aria-label="account type" orientation="horizontal">
  <Radio value="shipper">Shipper</Radio>
  <Radio value="carrier">Carrier</Radio>
</RadioGroup>

Controlled​

A radio group's state can be controlled by a parent React component by setting the value prop and passing a handler to the onChange prop.

http://localhost:3000
function ControlledExample() {
  const [selected, setSelected] = React.useState('shipper');

  return (
    <RadioGroup aria-label="account type" onChange={setSelected} value={selected}>
      <Radio value="shipper">Shipper</Radio>
      <Radio value="carrier">Carrier</Radio>
    </RadioGroup>
  );
}

Disabled State​

Set the isDisabled prop to prevent a user from selecting a radio option.

http://localhost:3000
<RadioGroup aria-label="account type" isDisabled>
  <Radio value="shipper">Shipper</Radio>
  <Radio value="carrier">Carrier</Radio>
</RadioGroup>

Disabled items​

Set the isDisabled prop on an option to prevent a user from selecting that option.

http://localhost:3000
<RadioGroup aria-label="account type">
  <Radio value="shipper">Shipper</Radio>
  <Radio isDisabled value="carrier">
    Carrier
  </Radio>
</RadioGroup>

Readonly​

Set the isReadOnly prop to render the radio items in a readonly mode.

http://localhost:3000
<RadioGroup aria-label="account type" isReadOnly>
  <Radio value="shipper">Shipper</Radio>
  <Radio value="carrier">Carrier</Radio>
</RadioGroup>

Props​

RadioGroup Props​

as?The root element to be rendered

Radio Props​

as?The root element to be rendered