Radio Button

Use Radio Button...

To prompt users to choose from a set of mutually-exclusive choices.
Inside a Selection Set as variant="single-select".

Don't use Radio Button...

To select more than one option. Use Checkbox instead.
To prompt users to choose between two mutually exclusive options that always has a default value, like “On” or “Off”. Use Toggle Switch instead.

ReactVanilla

<RadioButton
  id="label_content" //Unique id
  value="Label content" //Same as the Label that normally accompagny the Radio Button
  name="grouping_name" //All Radio Buttons in the same grouping should have the same value
  mr={3} //Set right margin on the Radio Button based on SWAN's Spacing system
/>

<RadioButton
  id="label_content" //Unique id
  value="Label content" //Same as the Label that normally accompagny the Radio Button
  name="grouping_name" //All Radio Buttons in the same grouping should have the same value
  mr={3} //Set right margin on the Radio Button based on SWAN's Spacing system
/>

<input id="label_content" //Unique id value="Label content" //Same as the Label
that normally accompagny the Radio Button name="grouping_name" //All Radio
Buttons in the same grouping should have the same value type="radio"
aria-label="radio" class="swan-radio swan-mr-3" //Set right margin on the Radio
Button based on SWAN's Spacing system />

<input id="label_content" //Unique id value="Label content" //Same as the Label
that normally accompagny the Radio Button name="grouping_name" //All Radio
Buttons in the same grouping should have the same value type="radio"
aria-label="radio" class="swan-radio swan-mr-3" //Set right margin on the Radio
Button based on SWAN's Spacing system />

Disabled

Use disabled to prevent users from selecting the Radio Button; when an option is unchangeable and not part of the current task.

ReactVanilla

<RadioButton
  id="label_content" //Unique id
  value="Label content" //Same as the Label that normally accompagny the Radio Button
  name="grouping_name" //All Radio Buttons in the same grouping should have the same value
  mr={3} //Set right margin on the Radio Button based on SWAN's Spacing system
  disabled
/>

<RadioButton
  id="label_content" //Unique id
  value="Label content" //Same as the Label that normally accompagny the Radio Button
  name="grouping_name" //All Radio Buttons in the same grouping should have the same value
  mr={3} //Set right margin on the Radio Button based on SWAN's Spacing system
  disabled
/>

<input id="label_content" //Unique id value="Label content" //Same as the Label
that normally accompagny the Radio Button name="grouping_name" //All Radio
Buttons in the same grouping should have the same value type="radio"
aria-label="radio" class="swan-radio swan-mr-3" //Set right margin on the Radio
Button based on SWAN's Spacing system />

<input id="label_content" //Unique id value="Label content" //Same as the Label
that normally accompagny the Radio Button name="grouping_name" //All Radio
Buttons in the same grouping should have the same value type="radio"
aria-label="radio" class="swan-radio swan-mr-3" //Set right margin on the Radio
Button based on SWAN's Spacing system />

Accessibility

Radio Button wrapping

Use RadioButton within a Selection Set.

Alternatively, if you wish to have more control over your layout, either:

Use Fieldset to place the radio buttons inside.

ReactVanilla

<FieldSet>
  <FieldSetLegend>Select a corner style</FieldSetLegend>
  <Box>
    <RadioButton id="standard" name="corners" value="standard" mr={2} />
    <label htmlFor="standard">Standard</label>
  </Box>
  <Box>
    <RadioButton id="rounded" name="corners" value="Rounded" mr={2} />
    <label htmlFor="rounded">Rounded</label>
  </Box>
</FieldSet>

<FieldSet>
  <FieldSetLegend>Select a corner style</FieldSetLegend>
  <Box>
    <RadioButton id="standard" name="corners" value="standard" mr={2} />
    <label htmlFor="standard">Standard</label>
  </Box>
  <Box>
    <RadioButton id="rounded" name="corners" value="Rounded" mr={2} />
    <label htmlFor="rounded">Rounded</label>
  </Box>
</FieldSet>

<fieldset class="swan-fieldset">
  <legend>Select a corner style</legend>
  <div>
    <input id="standard" //Unique id name="corners" //All Radio Buttons in the
    same grouping should have the same value type="radio" aria-label="radio"
    class="swan-radio swan-mr-2" //Right margin on the Radio Button based on
    SWAN's Spacing system value="standard" //Same as the Label that normally
    accompagny the Radio Button /><label for="standard">Standard</label>
  </div>
  <div>
    <input
      id="rounded"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Rounded"
    /><label for="rounded">Rounded</label>
  </div>
</fieldset>

<fieldset class="swan-fieldset">
  <legend>Select a corner style</legend>
  <div>
    <input id="standard" //Unique id name="corners" //All Radio Buttons in the
    same grouping should have the same value type="radio" aria-label="radio"
    class="swan-radio swan-mr-2" //Right margin on the Radio Button based on
    SWAN's Spacing system value="standard" //Same as the Label that normally
    accompagny the Radio Button /><label for="standard">Standard</label>
  </div>
  <div>
    <input
      id="rounded"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Rounded"
    /><label for="rounded">Rounded</label>
  </div>
</fieldset>

Or use an element that has both role="radiogroup" and the mandatory aria-labelledby attribute. The value of aria-labelledby should be the id of the element serving as the title for the radio group. If the group lacks a visible title, use the aria-label attribute with a descriptive title for the radio group. Ensure the value of aria-label is localized, since some browsers read it aloud to the user.

ReactVanilla

<>
  <Typography>Select a corner style</Typography>
  <Box>
    <RadioButton id="standard" name="corners" value="standard" mr={2} />
    <label htmlFor="standard">Standard</label>
  </Box>
  <Box>
    <RadioButton id="rounded" name="corners" value="rounded" mr={2} />
    <label htmlFor="rounded">Rounded</label>
  </Box>
</>

<>
  <Typography>Select a corner style</Typography>
  <Box>
    <RadioButton id="standard" name="corners" value="standard" mr={2} />
    <label htmlFor="standard">Standard</label>
  </Box>
  <Box>
    <RadioButton id="rounded" name="corners" value="rounded" mr={2} />
    <label htmlFor="rounded">Rounded</label>
  </Box>
</>

<div>
  <div>Choose your favourite design system:</div>
  <div>
    <input
      id="standard"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Standard"
    />
    <label for="standard">Standard</label>
  </div>
  <div>
    <input
      id="rounded"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Rounded"
    />
    <label for="rounded">Rounded</label>
  </div>
</div>

<div>
  <div>Choose your favourite design system:</div>
  <div>
    <input
      id="standard"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Standard"
    />
    <label for="standard">Standard</label>
  </div>
  <div>
    <input
      id="rounded"
      name="corners"
      type="radio"
      aria-label="radio"
      class="swan-radio swan-mr-2"
      value="Rounded"
    />
    <label for="rounded">Rounded</label>
  </div>
</div>

Required field

When a radio button is required for form submission:

Use aria-required="true" on the Radio Buttons' wrapper (it tells AT that this form input is required).
Also, use required on all of the Radio Buttons in the wrapped group (it tells the browser to block form submission until one of them is selected).

Use Radio Button...

Don't use Radio Button...

Disabled

Accessibility

Radio Button wrapping

Required field

Props

Related