4 forms Forms

Style individual form controls and utilize common layouts.

Source: styles.scss, line 28
Example
Markup: components/forms/example/example.twig
<form>
  <label for="name">Name</label>
  <input type="text" id="name">

  <label for="email">Email address</label>
  <input type="email" id="email">

  <label>
    <input type="checkbox"> Remember me
  </label>

  <label>
    <input type="radio" name="herpderp" checked> Herp
  </label>
  <label>
    <input type="radio" name="herpderp"> Derp
  </label>

  <button class="c-button c-button--blue" type="submit">Submit</button>
</form>
Source: components/forms/example/example.scss, line 1
Example
Markup: components/forms/select/select.twig
<form>
  <select>
    <option>Choose</option>
    <option>Cat</option>
    <option>Tiger</option>
    <option>Dog</option>
    <option>Hedgehog</option>
    <option>Bear</option>
  </select>
</form>
Source: components/forms/select/select.scss, line 1
Example
0
10
Markup: components/forms/slider/slider.twig
{% for element in elements %}
  <div class="slider slider-{{ element.name }} js-slider" data-min="{{ element.min }}" data-max="{{ element.max }}">
    <span class="slider__min">{{ element.min }}</span>
    <div class="slider__path js-slider-path">
      <span class="slider__handle js-slider-handle ui-slider-handle"></span>
    </div>
    <span class="slider__max">{{ element.max }}</span>
  </div>
{% endfor %}
Source: components/forms/slider/slider.scss, line 1