Forms

Forms

Labels

The `label` element is used to wrap label text, error message and input elements.

<label class="form__label">
    <span class="form__label-text">Label</span>
    <!-- Validation field -->
    <!-- Input/Textarea/Select -->
</label>

Textarea

The `<textarea>` element defines a multi-line input field (a text area)

Regular

The basic styling of textarea is a large multi-line box for text.
<textarea class="form__textarea"></textarea>

Small

With the modifier `.form__textarea--small` you get a small textarea.
<textarea class="form__textarea form__textarea--small"></textarea>

Smaller

With the modifier `.form__textarea--smaller` you get a smaller and more condensed textarea.
<textarea class="form__textarea form__textarea--smaller"></textarea>

Text input

The `<input>` tag specifies an input field where the user can enter data on a single line. There are various types of input fields, where the `type` attribute determines the type of a given input field. Available types are `text|email|tel`

<input class="form__textbox" type="text" />

Date input 

<input data-type="date" type="text" class="form__date form__date--datetime" id="EventStartDate" name="EventStartDate" aria-describedby="form-event-startdate-input" readonly="" placeholder="dd.mm.yy" required="" aria-label="Use the arrow keys to pick a date">

Select

The `<select>` element defines a drop-down list

Regular

<select class="form__select" aria-describedby="Select1Label" data-type="select" required="" name="Select1" id="Select1">
    <option value="0" disabled="disabled" selected="">Make a choice</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

Time selector

<select class="form__time form__time--datetime" name="EventStartTime" id="EventStartTime">
    <option value="00:00">00:00</option>
    <option value="01:00">01:00</option>
    <option value="02:00">02:00</option>
    <option value="03:00">03:00</option>
    <option value="04:00">04:00</option>
    <option value="05:00">05:00</option>
    <option value="06:00">06:00</option>
    <option value="07:00">07:00</option>
    <option value="08:00">08:00</option>
    <option value="09:00">09:00</option>
    <option value="10:00">10:00</option>
    <option value="11:00">11:00</option>
    <option value="12:00">12:00</option>
    <option value="13:00">13:00</option>
    <option value="14:00">14:00</option>
    <option value="15:00">15:00</option>
    <option value="16:00">16:00</option>
    <option value="17:00">17:00</option>
    <option value="18:00">18:00</option>
    <option value="19:00">19:00</option>
    <option value="20:00">20:00</option>
    <option value="21:00">21:00</option>
    <option value="22:00">22:00</option>
    <option value="23:00">23:00</option>
</select>

Radio button

The Input Radio object represents an HTML `<input>` element with `type="radio"`.

<label class="form__label form-section__input-group-item">
    <input data-type="radio" class="form__radio" id="WantCompensation-Yes" name="WantCompensation" type="radio" value="Ja">
    <span class="form__label-text form__label--offset">Radio button 1</span>
</label>

Checkbox

The Input Checkbox object represents an HTML `<input>` element with `type="checkbox"`.

<label class="form__label">
    <input data-type="checkbox" type="checkbox" class="form__checkbox" name="ProsecutionRequest">
    <span class="form__label-text form__label--offset">Checkbox 1</span>
</label>