Radio

Overview

Radio buttons let users select an option from a list of two or more items.

When to use:

  • Use radio buttons when a user can only make one, mutually exclusive selection from a list.

Implementation

A Radio is a group of items from which a single option can be selected.

Edit the code below to see your changes live!

function Example() {
  const [selected, setSelected] = useState('');

  const handleChange: InputProps['onChange'] = (event) =>
    setSelected(event.target.value);

  return (
    <Form>
      <FormGroup>
        <Radio
          checked={selected === 'on'}
          label="On"
          onChange={handleChange}
          value="on"
        />
        <Radio
          checked={selected === 'off'}
          label="Off"
          onChange={handleChange}
          value="off"
        />
        <Radio
          checked={selected === 'disabled'}
          disabled={true}
          label="Disabled"
          onChange={handleChange}
          value="disabled"
        />
      </FormGroup>
    </Form>
  );
}

Props

Supports all native <input /> element attributes.

Prop name
Type
Default
Description
label *string | RadioLabel

Label to display next to a Radio component.

descriptionstring | RadioDescription

See RadioDescription for usage.

Props ending with * are required

Do's and Don'ts

Do
Group related radio buttons under input headings.
Include a default selected option with the radio buttons.
Lay radio buttons vertically.
Don't
Don’t use radio buttons for long lists of short items. Use a select input instead.
A set of radio buttons should not have a state of being “unselected.” There must always be a selection.