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