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