Go to main content
Go to KTH Intranet

Checkbox

Select one or more options from a list

When to use this component

Use the checkboxes component as part of a form when the user should:

  1. Select one or more options from a list
  2. Toggle a single option on or off

When not to use this component

Do not use the checkboxes component if the user can only select one option from a list (i.e. the options are mutually exclusive). In this case, use the radios component.

How it works

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

The component should contain a set of one or more checkbox 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.

Checkbox group 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 checkbox 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="checkbox" class="kth-checkbox" />
      <label for="check1">Checkbox 1</label>
    </div>
    <div class="kth-input__option">
      <input id="check2" type="checkbox" class="kth-checkbox" />
      <label for="check2">Checkbox 2</label>
    </div>
  </fieldset>
</div>
@use "@kth/style/scss/components/input.scss";

Error messages

Inform the user of what went wrong, when they

  • Haven’t selected any of the checkbox options when the input is required
  • Checked both a ”none of the options” checkbox and another checkbox

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="checkbox" class="kth-checkbox" />
      <label for="check1">Checkbox 1</label>
    </div>
    <div class="kth-input__option">
      <input id="check2" type="checkbox" class="kth-checkbox" />
      <label for="check2">Checkbox 2</label>
    </div>
  </fieldset>
</div>
@use "@kth/style/scss/components/input.scss";