Styleguide 0.30.11

8 - Forms

8.1 - Form elements

8.1.1 - Text input

<form>
  <div class="row">
    <div class="large-12 columns">
      <input type="text" placeholder="text" />
      <input type="password" placeholder="password" />
      <input type="date" placeholder="date" />
      <input type="datetime" placeholder="datetime" />
      <input type="datetime-local" placeholder="datetime-local" />
      <input type="month" placeholder="month" />
      <input type="week" placeholder="week" />
      <input type="email" placeholder="email" />
      <input type="number" placeholder="number" />
      <input type="search" placeholder="search" />
      <input type="tel" placeholder="tel" />
      <input type="time" placeholder="time" />
      <input type="url" placeholder="url" />
      <textarea placeholder="textarea"></textarea>
    </div>
  </div>
</form>

8.1.2 - Checkbox

<form>
  <div class="row">
    <div class="large-12 columns">
      <div class="checkbox">
        <input id="exampleCheckbox-experimental" type="checkbox" checked>
        <label for="exampleCheckbox-experimental"> Custom checkbox</label>
      </div>
    </div>
  </div>
</form>

8.1.3 - Radio

<form>
  <div class="row">
    <div class="large-12 columns">
      <div class="radio">
        <input id="exampleRadio-experimental-1" type="radio" name="exampleRadio-experimental" checked>
        <label for="exampleRadio-experimental-1"> Custom radio</label>
      </div>
      <div class="radio">
        <input id="exampleRadio-experimental-2" type="radio" name="exampleRadio-experimental">
        <label for="exampleRadio-experimental-2"> Custom radio</label>
      </div>
    </div>
  </div>
</form>

8.1.4 - Select

<form>
  <div class="row">
    <div class="large-12 columns">
      <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </select>
    </div>
  </div>
</form>

8.1.5 - Range

Requires javascript

For documentation see db.libs.rangeSlider.

<input min="0" max="100" type="range" />

8.1.6 - Switch

Switches use checkboxes or raiobuttons.

.red

Red

.orange

Orange

.yellow

Yellow

.green

Green

.blue

Blue

.purple

Purple

.burgundy

Burgundy

.pink

Pink

<div class="switch round {$modifiers}">
  <input id="exampleCheckboxSwitch-{$modifiers}" type="checkbox" checked>
  <label for="exampleCheckboxSwitch-{$modifiers}"></label>
</div>

8.1.7 - Taglist

Experimental

For documentation see db.libs.taglist

<ul class="taglist">
  <li>
    <input type="text" placeholder="Enter tag…" />
    <input type="hidden" value="Tag1, Tag2, Tag3" />
  </li>
</ul>

8.2 - Labels

<form>
  <div class="row">
    <div class="large-12 columns">
      <label>Label
        <input type="text" placeholder="placeholder" />
      </label>
    </div>
  </div>
</form>

8.2.1 - Inline

<form>
  <div class="row">
    <div class="small-2 columns">
      <label for="right-label" class="right inline">Label</label>
    </div>
    <div class="small-10 columns">
      <input type="text" id="right-label" placeholder="Inline Text Input">
    </div>
  </div>
</form>

8.3 - Pre/Postfix

http://
@dagbladet.no
<form>
  <div class="row collapse">
    <div class="small-3 large-2 columns">
      <span class="prefix">http://</span>
    </div>
    <div class="small-9 large-10 columns">
      <input type="url" placeholder="URL">
    </div>
  </div>
  <div class="row collapse">
    <div class="small-9 large-10 columns">
      <input type="email" placeholder="Email">
    </div>
    <div class="small-3 large-2 columns">
      <span class="postfix">@dagbladet.no</span>
    </div>
  </div>
</form>

8.6 - Details

Some descriptive text
<form>
  <div class="row">
    <div class="large-12 columns">
      <label>Label
        <input type="text" placeholder="placeholder" />
      </label>
      <small class="details">Some descriptive text</small>
    </div>
  </div>
</form>

8.7 - Errors

Invalid entry
<form>
  <div class="row">
    <div class="large-12 columns error">
      <label>Label
        <input type="text" placeholder="placeholder" />
      </label>
      <small class="error">Invalid entry</small>
    </div>
  </div>
</form>

8.8 - Validation

Requires javascript

We use Abide for valdation. Full list of predefined patterns.

Name is required and must be a string.
<form data-abide>
  <div class="name-field">
    <label>Your name
      <input type="text" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <div class="email-field">
    <label>Email
      <input type="email" required>
    </label>
    <small class="error">An email address is required.</small>
  </div>
  <button class="button small" type="reset">Reset</button>
  <button class="button small ui" type="submit">Submit</button>
</form>

8.99 - Kitchen sink

.com
Switch 1
Switch 2
Switch 3
<form>
  <div class="row">
    <div class="large-12 columns">
      <label>Input Label
        <input type="text" placeholder="large-12.columns" />
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder="large-4.columns" />
      </label>
    </div>
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder="large-4.columns" />
      </label>
    </div>
    <div class="large-4 columns">
      <div class="row collapse">
        <label>Input Label</label>
        <div class="small-9 columns">
          <input type="text" placeholder="small-9.columns" />
        </div>
        <div class="small-3 columns">
          <span class="postfix">.com</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>
        Taglist
        <ul class="taglist">
          <li><input type="text" placeholder="Enter tag…" /></li>
        </ul>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <label>
        Range slider Label
        <input min="0" max="100" type="range" />
      </label>
    </div>
    <div class="large-6 columns">
      <label>Switches Label</label>
      <div class="switch round ">
        <input id="exampleCheckboxSwitch-k1" type="checkbox" checked>
        <label for="exampleCheckboxSwitch-k1"></label>
        Switch 1
      </div>
      <div class="switch round green">
        <input id="exampleCheckboxSwitch-k2" type="checkbox" checked>
        <label for="exampleCheckboxSwitch-k2"></label>
        Switch 2
      </div>
      <div class="switch round pink">
        <input id="exampleCheckboxSwitch-k3" type="checkbox">
        <label for="exampleCheckboxSwitch-k3"></label>
        Switch 3
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Select Box Label
        <select>
          <option value="husker">Husker</option>
          <option value="starbuck">Starbuck</option>
          <option value="hotdog">Hot Dog</option>
          <option value="apollo">Apollo</option>
        </select>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <label>Radio Label</label>
      <div class="radio">
        <input id="radio1" type="radio" name="radio-example" checked>
        <label for="radio1"> Custom radio</label>
      </div>
      <div class="radio">
        <input id="radio2" type="radio" name="radio-example" checked>
        <label for="radio2"> Custom radio</label>
      </div>
    </div>
    <div class="large-6 columns">
      <label>Checkbox Label</label>
      <div class="checkbox">
        <input id="checkbox1" type="checkbox" checked>
        <label for="checkbox1"> Checkbox 1</label>
      </div>
      <div class="checkbox">
        <input id="checkbox2" type="checkbox">
        <label for="checkbox2"> Checkbox 2</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Textarea Label
        <textarea placeholder="small-12.columns"></textarea>
      </label>
    </div>
  </div>
</form>