Go to main content
Go to KTH Intranet

Radio button

Select one option from a list

When to use this component

Use the radio button component when the user can only select one option from a list of several options.

When not to use this component

Do not use the radio button component if:

  1. The user can select multiple options from the list
  2. There is only one option in the list

In both of these case, use the checkbox component instead.

How it works

To read more about the different parts that together form the full radio button component, see Input.

The last elements should be a set of radio button options. One option consists of a div that wraps an input and a label. It is important that the input and label are connected using id for input and for for label. It is also important that all inputs are connected by having the same name value.

Group of radio buttons with label, description and requirement

The required label is the first visible element, which is followed by a the optional elements for description and requirement. The last elements that are seen are two radio button options.

Code 
<div class="kth-input">
  <fieldset>
    <legend class="kth-input__label">Label</legend>
    <p class="kth-input__description">
      This is a descriptive text that is shown below the label. It does not have
      a set length.
    </p>
    <p class="kth-input__requirement">Required</p>
    <div class="kth-input__option">
      <input id="check1" type="radio" class="kth-radio" name="all" />
      <label for="check1">Radio button 1</label>
    </div>
    <div class="kth-input__option">
      <input id="check2" type="radio" class="kth-radio" name="all" />
      <label for="check2">Radio button 2</label>
    </div>
  </fieldset>
</div>
@use "@kth/style/scss/components/input.scss";

Error messages

Inform the user of what went wrong, when they have not selected a radio button when the input is required.

The error text should clearly describe what the user should do to correct the error.

Code 
<div class="kth-input error">
  <fieldset>
    <legend class="kth-input__label">Label</legend>
    <p class="kth-input__description">
      This is a descriptive text that is shown below the label. It does not have
      a set length.
    </p>
    <p class="kth-input__requirement">Required</p>
    <p class="kth-input__error-text">Ange svar</p>
    <div class="kth-input__option">
      <input id="check1" type="radio" class="kth-radio" name="error" />
      <label for="check1">Radio button 1</label>
    </div>
    <div class="kth-input__option">
      <input id="check2" type="radio" class="kth-radio" name="error" />
      <label for="check2">Radio button 2</label>
    </div>
  </fieldset>
</div>
@use "@kth/style/scss/components/input.scss";