Go to main content
Go to KTH Intranet

Input

Interactive controls for forms

Different types of inputs

KTH style currently offers two different types of inputs:

  1. Checkbox
  2. Radio button

How it works

All inputs that are part of KTH style are created using the same structure. The difference between them are how the actual input is displayed. Checkbox and radio button can have several inputs that together form a group of options, while the other input types only consist of one input element.

The base for all variants is a div with the class name kth-input which is used as a wrapper for the component. This is needed for all other class names to have an effect.

For checkbox and radio button, there should be a fieldset tag placed directly inside the div to show a relationship between the input options.

The elements that are placed inside the div (or fieldset for checkbox and radio button) are:

  1. Label:

    • Checkbox and radio button: The first element inside the fieldset must be a legend and its purpose is to describe the group of inputs. This label is required and should never be left out.
      Note

      In this documentation, this element is referred to as label which should not be confused with the html tag label for the inputs.

  2. After the label there are different alternatives on what can come next. There are two optional elements called description and requirement. One of them, both of them or none of them can be placed directly after the legend. If both are used, it is important that the description is placed before the requirement.

  3. The last elements should be the actual input. This can either be one input field or a set of one or more input options.

Input with only a label

The simplest form only contains a label in addition to the input/-s. The label is created using the html tag legend and it should be given the class name kth-input__label. The text content of the label should describe what the user is selecting. It can for example be a question or statement but it is important to keep it as short and descriptive as possible.

Code 
<div class="kth-input">
  <fieldset>
    <legend class="kth-input__label">Label</legend>
    <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";

Input with label and description

A description can be added directly below the legend. This can be beneficial when a further explanation is needed to complement the label. The description can be longer than the label, but it is still important to keep it concise.

A p tag with the class name kth-input__description should be used for the description.

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>
    <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";

Input with label and requirement

If it is required that the user enters information to the input, the requirement text should be used. This lets the user know that it is required and that they cannot submit the form without an it being entered.

A p with the class name kth-input__requirement should be used for the requirement text and the text should say Required in English and Obligatorisk in Swedish.

Code 
<div class="kth-input">
  <fieldset>
    <legend class="kth-input__label">Label</legend>
    <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";

Input with label, description and requirement

Both description and requirement can be used at the same time. If this is done, the description should be placed before the requirement.

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. There are two steps to accomplish this:

  1. Add the class name error to the div with the class name kth-input. This will add the red left border.

  2. Add a p tag directly above the input or the first input option with text that concisely describes the error. This p should have the class name kth-input__error-text which will make the text red and include an error icon.

    Note

    This element should only be added to the dom if there is an error. I.e. it should not be displayed or hidden using css.

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";