Forms

Default, Readonly, Disabled

(The default behavior of input fields is to stretch to 100% of their container.)

<label for=…>…</label>
<input id=… class=text-input type=text placeholder="…">
<label for=…>…</label>
<input id=… class=text-input type=text value="…">
<label for=…>…</label>
<input id=… class=text-input type=text placeholder="…">
Basic form
<form>
  <fieldset>
    <legend>…</legend>
    <ol class=list-bare>
      <li class=form-field>
        <label for=…>…</label>
      <input id=… class=text-input type=text placeholder="…">
      <small class=form-field__help>…</small>
      </li>
      <li class=form-field>
        <input id=… type=checkbox>
        <label class=label--inline for=…>…</label>
      </li>
    </ol>
  </fieldset>
  <input class="btn btn--primary" type=submit value=…>
  <input class=btn type=reset value=…>
</form>
  1. Lorem Ipsum Dolor Sit
Checkbox
<input id=… type=checkbox disabled>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ type=checkbox>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ type=checkbox checked>
<label class=label--inline for=…>…</label>
Radio Button
<input id=… name=… type=radio disabled>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ name=… type=radio>
<label class=label--inline for=…>…</label>
<input id=… class=u-ml++ name=… type=radio checked>
<label class=label--inline for=…>…</label>
One Line Form
<label class=label--inline for=…>…</label>
<input id=… class="text-input input--…" type=text>
<label class=label--inline for=…>…</label>
<input id=… class="text-input input--…" type=text>
<input id=… type=checkbox>
<label class=label--inline for=…>…</label>
<input class="btn btn--primary" type=submit value=…>
Different input field widths
<input class="text-input input--tiny" type=text>
<input class="text-input input--small" type=text>
<input class="text-input input--regular" type=text>
<input class="text-input input--large" type=text>
<input class="text-input input--huge" type=text>
Different input types
<input class=text-input type=email>
<input class=text-input type=tel>
<input class=text-input type=search>
<input class=text-input type=number>
<input class=text-input type=password>
Text Area
<textarea placeholder="…"></textarea>
Validation States
<ol class=list-bare>
 <li class=form-field>
  <label for=… class=validation-warning>…</label>
  <input id=… class="text-input validation-warning" type=text>
  <small class="form-field__help validation-warning">…</small>
 </li>
 <li class=form-field>
  <label for=… class=validation-error>…</label>
  <input id=… class="text-input validation-error" type=text>
  <small class="form-field__help validation-error">…</small>
 </li>
 <li class=form-field>
  <label for=… class=validation-success>…</label>
  <input id=… class="text-input validation-success" type=text>
  <small class="form-field__help validation-success">…</small>
 </li>
</ol>
  1. Help Text
  2. Help Text
  3. Help Text
Dropdown
<select>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>
<select disabled>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>
<select>
  <optgroup label="…">
    <option>…</option>
    <option>…</option>
    <option>…</option>
    <option>…</option>
  </optgroup>
  <optgroup label="…">
    <option>…</option>
    <option>…</option>
    <option>…</option>
    <option>…</option>
  </optgroup>
</select>
Multiple Select
<select multiple>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
  <option>…</option>
</select>