5 Form

Form components are specialized design components that are applied to forms and form elements.

5.1 Input fields View in a new window

Input fields make up the majority of form fields, the most common types are details below.

5.1.1 Text View in a new window

The standard input[type="text"] element, with a label and help text. Display indication for :valid and :invalid states. Drupal uses the class .error for invalid inputs so we'll use that.

Twig: form/input/input-text.twig

Default example
Indication that the text field with required input is valid
Indication that the text field with required input is invalid
Markup 
<div class="form__item">
  <label for="inputText" class="label--required">Input text field</label>
  <input type="text" id="inputText" aria-describedby="inputTextHelp" class="{{ modifier_class }}" required>
  <div role="tooltip" id="inputTextHelp" class="form__description">Help text that provides additional information about the field.</div>
</div>

5.1.2 Text input (placeholder) View in a new window

Although placeholder text should generally be avoided, the styling of this text is shown here.

Twig: form/input/input-text-placeholder.twig

Example
Markup 
<div class="form__item">
  <label for="fullName">Full name</label>
  <input type="text" id="fullName" placeholder="e.g. John smith">
</div>

5.1.3 Checkbox (multiple) View in a new window

The standard input[type="checkbox"] element, using a fieldset and legend as the accessible way to group and label multiple checkbox inputs.

Optionally a tooltip can be used by using the aria-describedby attribute on the fieldset itself.

Twig: form/input/input-checkbox.twig

Example
A set of checkbox inputs
Markup 
<fieldset class="form__item form--checkboxes {{ modifier_class }}" aria-describedby="checkboxHelp" >
  <legend>A set of checkbox inputs</legend>
  <div class="form__checkbox">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">This is an example checkbox</label>
  </div>
  <div class="form__checkbox">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">This is an example <em>checkbox</em></label>
  </div>
  <div class="form__checkbox">
    <input type="checkbox" id="checkbox3">
    <label for="checkbox3">This is an example <strong>checkbox</strong></label>
  </div>
  <div class="form__checkbox">
    <input type="checkbox" id="checkbox4">
    <label for="checkbox4">This is an example <em><strong>checkbox</strong></em></label>
  </div>
  <div class="form__checkbox">
    <input type="checkbox" id="checkbox5">
    <label for="checkbox5">This is an example <a href="#">checkbox</a></label>
  </div>
  <div role="tooltip" id="checkboxHelp" class="form__description">Help text that provides additional information about the field.</div>
</fieldset>

5.1.4 Checkbox (single) View in a new window

Used for things like accepting terms and conditions and opting in to communications.

Twig: form/input/input-checkbox-single.twig

Default example
Indication that the text field with required input is valid
Indication that the text field with required input is invalid
Markup 
<div class="form__item">
  <div class="form__checkbox">
    <input type="checkbox" id="singleCheckbox{{ modifier_class }}" class="{{ modifier_class }}" required>
    <label for="singleCheckbox" class="label--required">I agree to the terms and conditions</label>
  </div>
</div>

5.1.5 Radios (multiple) View in a new window

The standard input[type="radio"] element, using a fieldset and legend as the accessible way to group and label multiple radio inputs.

Optionally a tooltip can be used by using the aria-describedby attribute on the fieldset itself.

Twig: form/input/input-radio.twig

Example
A set of radio inputs
Markup 
<fieldset class="form__item form--radios" aria-describedby="radioHelp">
  <legend>A set of radio inputs</legend>
  <div class="form__radio">
    <input type="radio" id="radio1" name="radio">
    <label for="radio1">This is an example radio button</label>
  </div>
  <div class="form__radio">
    <input type="radio" id="radio2" name="radio">
    <label for="radio2">This is an example <em>radio button</em></label>
  </div>
  <div class="form__radio">
    <input type="radio" id="radio3" name="radio">
    <label for="radio3">This is an example <strong>radio button</strong></label>
  </div>
  <div class="form__radio">
    <input type="radio" id="radio4" name="radio">
    <label for="radio4">This is an example <em><strong>radio button</strong></em></label>
  </div>
  <div class="form__radio">
    <input type="radio" id="radio5" name="radio">
    <label for="radio5">This is an example <a href="#">radio button</a></label>
  </div>
  <div role="tooltip" id="radioHelp" class="form__description">Help text that provides additional information about the field.</div>
</fieldset>

5.2 Select View in a new window

The select field, used to choose a single option from a list. If multiple options can be selected at the same time, consider using the Checkbox (multiple) component instead.

Twig: form/select/select.twig

Default example
Indication that the text field with required input is valid
Indication that the text field with required input is invalid
Markup 
<div class="form__item">
  <label for="select1" class="label--required">A select drop down</label>
  <select id="select1" aria-describedby="selectHelp" class="{{ modifier_class }}" required>
    <option value="">Select Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
    <option value="10">Option 10</option>
  </select>
  <div role="tooltip" id="selectHelp" class="form__description">Help text that provides additional information about the field.</div>
</div>

5.3 Textarea View in a new window

A textarea field is used for multiple lines of text input.

Twig: form/textarea/textarea.twig

Default example
Indication that the text field with required input is valid
Indication that the text field with required input is invalid
Markup 
<div class="form__item">
  <label for="textarea1" class="label--required">A textarea</label>
  <textarea id="textarea1" aria-describedby="textareaHelp" class="{{ modifier_class }}" required></textarea>
  <div role="tooltip" id="textareaHelp" class="form__description">Help text that provides additional information about the field.</div>
</div>

5.5 Label View in a new window

The form label element must be present for all form elements, and have a for attribute that matches the id of the associated form element.

Twig: form/label/label.twig

Example
Markup 
<label for="field1">A form label</label>
<input type="text" id="field1">

5.5.1 Label Required View in a new window

Indicator for the label that the field is required.

Twig: form/label/label-required.twig

Example
Markup 
<label for="field1" class="label--required">A form label for a required field</label>
<input type="text" id="field1" required>

5.6 Fieldset View in a new window

The fieldset element is used for grouping form elements. See the Checkbox (multiple) and Radios (multiple) components for how it is best used.

Twig: form/fieldset/fieldset.twig

Example
Fieldset legend

Content inside a fieldset

Markup 
<fieldset>
  <legend>Fieldset legend</legend>
  <p>Content inside a fieldset</p>
</fieldset>

5.7 Description View in a new window

Text that describes a form field. The form element must have an aria-describedby attribute that points to the id of the description text.

Twig: form/form/form-description.twig

Example
Markup 
<label for="input7">Input text field</label>
<input type="text" id="input7" aria-describedby="input7Help">
<div role="tooltip" id="input7Help" class="form__description">Help text that provides additional information about the field.</div>

5.8 File Input View in a new window

The standard input[type="file"] element.

Twig: form/input/file.twig

Example
Markup 
<input type="file" size="60" class="form-file">

5.9 Conditional Field View in a new window

Example
Show Next Field?
Markup 
<div class="js-conditional-field fieldset__row">
  {% block content %}
    <div class="conditional-field__control">
      <span class="fieldset__field-title">Show Next Field?</span>
      <label for="control-field-yes">
        <input type="radio" name="control-field[]" id="control-field-yes" data-conditional-show="conditional-field-2-container"> Yes
      </label>
      <label for="control-field-no">
        <input type="radio" name="control-field[]" id="control-field-no" data-conditional-hide="conditional-field-2-container"> No
      </label>
    </div>
    <label for="conditional-field-2" class="visually-hidden" data-conditional-wrapper="conditional-field-2-container">
        Field Label 2
        <input type="text" id="conditional-field-2">
    </label>
  {% endblock %}
</div>