10 #Forms Forms

form-group, form-control

Basic form styles are included in the core stylesheet. For additional options beyond those shown here, see the extended style sheet.

Form controls will automatically grow to 100% width; they will be as wide as the container where they are placed. Use true grid containers where needed to set the width of form elements. Wrap labels and their inputs in a form-group class. Add the form-control class to inputs and textareas.

Example 
<form>
  <div class="row">
    <div class="form-group true-grid-5">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
  <div class="row">
    <div class="form-group true-grid-5">
      <label for="exampleInputPassword1">
        Password
      </label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"><i></i> Check me out
    </label>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

10.1 #Forms.Inputs Input types

Styling is applied to all "text", "password", "email", "url", "search", or "tel" type <inputs>, as well as <textarea>s.

Example 
<input id="input-id" class="form-control" type="text">
Example
Show Markup
<textarea class="form-control" rows="3"></textarea>

10.1.1 #Forms.Inputs.Checkboxes Checkboxes

checkbox

Note the empty <i> tag. This is important for the custom checkbox to work.

Example 
<div class="checkbox">
  <label>
    <input type="checkbox" name="check_one"><i></i> Check me out
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="check_two"><i></i> Check me out
  </label>
</div>

10.1.2 #Forms.Inputs.Radio Radio Buttons

radio

Example 
<div class="radio">
  <label>
    <input type="radio" name="radio-demo" value="1" checked>
    Option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radio-demo" value="2">
    Option two
  </label>
</div>

10.1.3 #Forms.Inputs.Select Select boxes

To regular select boxes. Apply the form-control class.

Example 
<select name="foo" class="form-control">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

10.1.3.1 #Forms.Inputs.Select.Chosen Chosen jQuery plugin

For more advanced select box styling, JavaScript is required. We support two options: the chosen jquery plugin, or your own custom script.

With jQuery and the chosen plugin on the page, initialize Chosen with:

$('select').chosen({ disable_search: true, inherit_select_classes: true });

The option inherit_select_classes must be true if you wish to apply one of the modifier classes. If you are using a multi-select, use the placeholder_text_multiple option to specify placeholder text:

$('select').chosen({ placeholder_text_multiple: "placeholder text" });

Examples
Default styling
select-compact
More compact dropdown results
select-long
Allow for a taller dropdown 
<select name="foo" class="[modifier class]">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
  <option value="five">Five</option>
  <option value="six">Six</option>
  <option value="seven">Seven</option>
  <option value="eight">Eight</option>
</select>
Example
Show Markup
<select name="foo" multiple>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

10.1.3.2 #Forms.Inputs.Select.Custom Using a custom script

selectbox, selectbox-single, selectbox-main, selectbox-options

To use a custom script rather than Chosen, you should match this markup structure. Toggle the is-open class to open/close the menu. For the website, we have created a React component that meets this signature.

Examples
Default styling
Option One
select-compact
More compact dropdown results
Option One
select-long
Allow for a taller dropdown
Option One 
<div class="selectbox selectbox-single [modifier class]">
  <div class="selectbox-main">
    <a href="#" tabindex="-1">Option One</a>
  </div>
  <ul class="selectbox-options">
    <li><a href="#" tabindex="-1">Option One</a></li>
    <li><a href="#1" tabindex="-1">Option Two</a></li>
    <li><a href="#2" tabindex="-1">Option Three</a></li>
    <li><a href="#3" tabindex="-1">Option Four</a></li>
  </ul>
</div>

10.1.4 #Forms.Inputs.Disabled Disabled

Example 
<input type="text" class="form-control" disabled/>
Example
Show Markup
<div class="checkbox">
  <label>
    <input type="checkbox" name="check_one" disabled><i></i> Checkbox
  </label>
</div>
Example
Show Markup
<div class="radio">
  <label>
    <input type="radio" name="radio-demo" value="1" disabled>
    Radio
  </label>
</div>

10.2 #Forms.Addons Form addons extended

input-group, input-group-addon

Attach an addon label to the beginning or the end of an input. Useful to indicate units such as dollars or percent.

Example
$
<div class="input-group">
  <div class="input-group-addon">$</div>
  <input class="form-control" type="number" placeholder="Enter amount">
</div>
Example
%
Show Markup
<div class="input-group">
  <input class="form-control" type="number" placeholder="Enter percent">
  <div class="input-group-addon">%</div>
</div>
Example
Show Markup
<div class="input-group">
  <input class="form-control" type="text" placeholder="Enter value">
  <button class="input-group-btn btn">Submit</button>
</div>

10.3 #Forms.Compact Compact extended

form-compact

Use this option for tighter spacing and smaller inputs. This is especially useful for webapps with a lot of inputs and buttons. This also works in conjuction with form-inline

Example 
<form class="form-compact">
  <div class="row">
    <div class="form-group true-grid-3">
      <label for="compact-form-email">Email address</label>
      <input type="email" class="form-control" id="compact-form-email" placeholder="Enter email">
    </div>
  </div>
  <div class="row">
    <div class="form-group true-grid-3">
      <label for="compact-form-password">
        Password <span class="form-label-additional">Min. 8 characters</span>
      </label>
      <input type="password" class="form-control" id="compact-form-password" placeholder="Password">
    </div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"><i></i> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
Example
Show Markup
<form class="form-compact form-inline row">
  <div class="form-group true-grid-4">
    <label for="compact-inlino-input">Input</label>
    <input id="compact-inlino-input" type="text" class="form-control"/>
  </div>
  <div class="form-group true-grid-3">
    <label for="compact-inline-select">Input</label>
    <select id="compact-inline-select" type="text">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div class="true-grid-2">
    <button class="btn btn-primary btn-sm">Submit</button>
  </div>
</form>

10.4 #Forms.Datepicker Datepicker extended

datepicker-control

Use the class datepicker-control to indicate date pickers. Both jQuery UI and Bootstrap datepickers are supported.

Example 
<div class="row">
  <div class="true-grid-4">
    <input type="text" class="form-control datepicker-control" value="18-Feb-2014"/>
  </div>
</div>
Example
to
Show Markup
<div class="row">
  <div class="form-group true-grid-6 form-date-range">
    <label>Date Range with Pickers</label>
    <input type="text" value="18-Feb-2014" class="form-control datepicker-control form-date-range-begin">
    <span class="form-date-range-to">to</span>
    <input type="text" value="18-Feb-2014" class="form-control datepicker-control form-date-range-end">
  </div>
</div>

10.4.1 #Forms.Datepicker.Date-Range Date Range extended

form-date-range

Instead of a datepicker, you can also use select boxes for choosing a date range.

Example
to 
<div class="row">
  <div class="form-group true-grid-8 form-date-range">
    <label>Date Range with Selects</label>
    <div class="form-date-range-begin">
      <select name="from-month">
        <option>January</option>
        <option>February</option>
      </select>
      <select name="from-year">
        <option>2014</option>
      </select>
    </div>
    <span class="form-date-range-to">to</span>
    <div class="form-date-range-end">
      <select name="to-month">
        <option>January</option>
        <option>February</option>
      </select>
      <select name="to-year">
        <option>2014</option>
      </select>
    </div>
  </div>
</div>

10.5 #Forms.Inline Inline extended

form-inline

Make forms appear inline with form-inline. Inputs will still stack horizontally on small devices. Be sure to use the form-group class as always. You can optionally use the grid system to set widths of inputs.

Example 
<form class="form-inline row">
  <div class="form-group true-grid-4">
    <label for="inline-input-id">Input</label>
    <input id="inline-input-id" type="text" class="form-control"/>
  </div>
  <div class="form-group true-grid-3">
    <label for="inline-select-id">Input</label>
    <select id="inline-select-id" type="text">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div class="true-grid-2">
    <button class="btn btn-primary">Submit</button>
  </div>
</form>

10.6 #Forms.Radio-Links Radio links extended

radio-link

An alternate styling for radio buttons.

Example
Time zone 
<legend>Time zone</legend>
<div class="radio-link">
  <label>
    <input type="radio" name="time-zone" value="new-york" checked>
    <span>New York</span>
  </label>
  <label>
    <input type="radio" name="time-zone" value="london">
    <span>London</span>
  </label>
  <label>
    <input type="radio" name="time-zone" value="singapore">
    <span>Singapore/Hong Kong</span>
  </label>
</div>

10.7 #Forms.Site-search Site Search

site-search, site-search-icon, site-search-close

Works within a left-aligned or right-aligned container.

Example 
<div class="site-search">
  <button class="site-search-icon">Search</button>
  <input type="search" placeholder="Search" value="">
  <button class="site-search-close" type="button">Close</button>
</div>

10.8 #Forms.States Feedback states

Apply contextual states to provide user feedback during form validation.

Examples
Default styling
has-success
Indicate valid input
has-warning
Indicate potentially invalid input or required field
has-error
Indicate invalid input 
<div class="form-group [modifier class]">
  <label for="username">Username</label>
  <input type="text" class="form-control" id="username">
</div>

10.9 #Forms.Helpers Helper classes extended

There are a handful of helper classes for additional styling options

10.9.1 #Forms.Helpers.Additional-Label Additional label extended

form-label-additional

Used to add a bit of helper text to the label.

Example 
<div class="form-group true-grid-5">
  <label for="exampleInputPassword1">
    Password <span class="form-label-additional">Min. 8 characters</span>
  </label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

10.9.2 #Forms.Helpers.Columns Form columns extended

form-column

Use in conjunction with the grid to organize portions of the form into columns.

Example 
<fieldset class="form-column true-grid-3">
  <div class="form-group">
    <label>Pick a number</label>
    <select name="foo" class="form-control">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</fieldset>
<fieldset class="form-column true-grid-6">
  <div class="row">
    <div class="form-group true-grid-3">
      <label>First Name</label>
      <input type="text" class="form-control"/>
    </div>
    <div class="form-group true-grid-3">
      <label>Last Name</label>
      <input type="text" class="form-control"/>
    </div>
  </div>
</fieldset>