Form

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

              

                {% set id = random() %}
<label for="input-description{{ id }}">Input text field</label>
<input aria-describedby="input-description-help{{ id }}" id="input-description{{ id }}" type="text">
<div class="form__description" id="input-description-help{{ id }}" role="tooltip">Help text that provides additional information about the field.</div>

              

                {% set id = random() %}
<div class="form__item">
  <label for="input-error-{{ id }}">Input text field</label>
  <input aria-describedby="input-error-{{ id }}Help" class="error" id="input-error-{{ id }}" type="text">
  <div class="form__error-message" id="input-error-{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
</div>

              

                <fieldset class="{{ modifier_class }}">
  <legend>Fieldset legend</legend>
  <p>Content inside a fieldset</p>
</fieldset>

              

                {% set id = random() %}
<label for="field1-{{ id }}" class="{{ modifier_class }}">A form label</label>
<input id="field1-{{ id }}" type="text">

              

                {% set id = random() %}
<fieldset aria-describedby="radio{{ id }}Help" class="fieldset--plain form__item">
  <legend>A set of radio inputs</legend>
  <div class="form__radio {{ modifier_class }}">
    <input id="radio1{{ id }}" name="radio" type="radio">
    <label for="radio1{{ id }}">This is an example radio button</label>
  </div>
  <div class="form__radio {{ modifier_class }}">
    <input id="radio2{{ id }}" name="radio" type="radio">
    <label for="radio2{{ id }}">This is an example
      <em>radio button</em>
    </label>
  </div>
  <div class="form__radio {{ modifier_class }}">
    <input id="radio3{{ id }}" name="radio" type="radio">
    <label for="radio3{{ id }}">This is an example
      <strong>radio button</strong>
    </label>
  </div>
  <div class="form__radio {{ modifier_class }}">
    <input id="radio4{{ id }}" name="radio" type="radio">
    <label for="radio4{{ id }}">This is an example
      <em>
        <strong>radio button</strong>
      </em>
    </label>
  </div>
  <div class="form__radio {{ modifier_class }}">
    <input id="radio5{{ id }}" name="radio" type="radio" disabled>
    <label for="radio5{{ id }}">This is a disabled example
      <a href="#">radio button</a>
    </label>
  </div>
  <div class="form__description" id="radio{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
</fieldset>

              

                {% set id = random() %}
<div class="form__item">
  <label for="select{{ id }}">A select drop down</label>
  <select id="select{{ id }}" class="{{ modifier_class }}" aria-describedby="selectHelp{{ id }}">
    <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{{ id }}" class="form__description">Help text that provides additional information about the field.</div>
</div>

              

                {% set id = random() %}
<div class="form__item">
  <label for="input{{ id }}">{{ label|default('Input text field') }}</label>
  <input type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}" placeholder="{{ placeholder }}">
  <div class="form__description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
</div>

              

                {% set id = random() %}
<div class="form__item form__item--inline">
  <div class="form__item">
    <label class="label--inline" for="input1{{ id }}">Input field</label>
    <input type="text" id="input1{{ id }}"  class="{{ modifier_class }}">
  </div>
  <div class="input__divider">OR</div>
  <div class="form__item">
    <label class="visually-hidden" for="input2{{ id }}">Other input field</label>
    <input type="text" id="input2{{ id }}" class="{{ modifier_class }}" placeholder="Other input">
  </div>
</div>

              

                {% set id = random() %}
<div class="form__item">
  <label for="input{{ id }}">{{ label|default('Input text field') }}</label>
  <span class="input__text--icon icon icon--{{ icon|default('email') }}">
    <input type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}" placeholder="{{ placeholder }}">
  </span>
  <div class="form__description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
</div>

              

                {% set id = random() %}
<div class="form__item">
  <label for="input{{ id }}">Input text field</label>
  <span class="input__text--inline">
    <input type="text" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}">
    <input class="button button--primary" type="submit" value="Search"/>
  </span>
  <div class="form__description" id="input{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
</div>

              

                {% set id = random() %}
<div class="form__item">
  <label for="textarea{{ id }}">A textarea</label>
  <textarea aria-describedby="textarea{{ id }}Help" id="textarea{{ id }}"></textarea>
  <div class="form__description" id="textarea{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
</div>