Text input

By default, text inputs have a display value of inline-block. For inputs that should span the entire width, add a stretch class.

.dark input
input.stretch
input.short
<fieldset>
  <label>Enter your name</label>
  <input type='text' value='' />
</fieldset>

<fieldset>
  <label>Enter your name</label>
  <input type='text' value='' class='stretch' />
</fieldset>

<fieldset>
  <label>Enter your favorite color</label>
  <input type='text' value='' class='stretch' />
</fieldset>

Input with icon

<fieldset class='with-icon'>
  <span class='icon search'></span>
  <input type='text' value='' />
</fieldset>

Input with spinner

  <div class='pad2 clearfix contain'>
    <fieldset class='with-icon spinner'>
      <span class='icon search'></span>
      <input type='text' value='' class='stretch' />
    </fieldset>
  </div>

Texarea

textarea.resize
.dark textarea
<fieldset>
  <label>Enter a description</label>
  <textarea name=''></textarea>
</fieldset>

<fieldset>
  <label>Enter a description</label>
  <textarea class='resize' name=''></textarea>
</fieldset>

Checkboxes

Transforms a checkbox label into a single selected action. When you specify an icon + icon name as a class to the label element, the icon is visible when the checkbox is set to :checked. Can be used with any .button or .pill style.

.pill.checkbox
.dark.pill.checkbox
<div class='pad2 checkbox-pill'>
  <input type='checkbox' id='hydra' checked='checked'>
  <label for='hydra' class='button icon check'>Hydra</label>
  <input type='checkbox' id='dragon' checked='checked'>
  <label for='dragon' class='button icon check loud'>Dragon</label>
  <input type='checkbox' id='unicorn' checked='checked'>
  <label for='unicorn' class='button icon check quiet'>Unicorn</label>
</div>


<div class='fill-dark dark pad2 checkbox-pill'>
  <input type='checkbox' id='penny' checked='checked'>
  <label for='penny' class='button icon check'>Penny Dog</label>
  <input type='checkbox' id='hot' checked='checked'>
  <label for='hot' class='button icon check loud'>Hot Dog</label>
  <input type='checkbox' id='rat' checked='checked'>
  <label for='rat' class='button icon check quiet'>Street Rat</label>
</div>

/* Fancy checkboxes as tabs */

<div class='checkbox-pill pill clearfix'>
  <input type='checkbox' id='checkbox-penny' checked='checked'>
  <label for='checkbox-penny' class='button icon heart'>Penny Dog</label>
  <input type='checkbox' id='checkbox-pizza'>
  <label for='checkbox-pizza' class='button icon heart'>Pizza Dog</label>
  <input type='checkbox' id='checkbox-old'>
  <label for='checkbox-old' class='button icon heart'>Old Dog</label>
</div>

Radio buttons

Styles a radio button label. When you specify an icon + icon name as a class to the label element, the icon is visible when the checkbox is set to :checked. Can be used with any button and pill style.

<div class='pad2 radio-pill pill clearfix col12'>
  <input type='radio' name='animals' id='steve' checked='checked'>
  <label for='steve' class='col4 button icon check'>Steve Cat</label>
  <input type='radio' name='animals' id='penelope'>
  <label for='penelope' class='col4 button icon check'>Penelope Cat</label>
  <input type='radio' name='animals' id='diego'>
  <label for='diego' class='col4 button icon check'>Diego Cat</label>
</div>

Range slider

<fieldset>
  <input type='range' value='0' min='0' max='1' step='0.05'>
</fieldset>

Submit and Button elements

All button styling is derived from the button class.

    <button>Button</button>
    <button class='button'>Button</button>
    <input type='submit' value='Submit' />
    <input class='button' type='submit' value='Submit' />