Text box

Purpose

Users need to input a simple text value.

Description

Text boxes allow the user to input a simple text value. A text box only allows for a single line of input.

<input type="text" class="form-control">
<input type="text" class="form-control" disabled>

Input masks

Input masks ensure that the user understands the input format required, in addition to making input less error-prone by potentially restricting the number or types of characters that can be entered.

Example uses https://github.com/RobinHerbots/jquery.inputmask for demo purposes.

<input type="text" class="form-control" id="im1" data-inputmask="'mask': '999-99-9999'">
<input type="text" class="form-control" id="im1" data-inputmask="'mask': 'PCT/99,999,999'">
<input type="text" class="form-control" id="im1" data-inputmask="'alias': 'date'">

Text area

Purpose

Users need to input an extended, potentially multi-line text value.

Description

Text areas allow the user to input extended, multi-line text values.

Sizing and resizing

Text areas can either

have a fixed, static height
automatically grow/shrink based on the input, from a minimum number of lines (e.g., 3) to a maxmimum number of lines (e.g., 10) to ensure that space is optimally used
have a resize handle, allowing for manual vertical and/or horizontal resizing

<textarea class="form-control" rows="2"></textarea>

Radio buttons

Purpose

Users must choose between two or more mutually exclusive options.

Description

Radio buttons come in a group of two or more mutually exclusive options
A radio button is either checked or unchecked
There can only be one radio button checked in a group
Radio button labels should use sentence casing
Use concise labels
Provide an initially checked option when the field is not required and/or there is a sane default
Align vertically when possible
Align in shorter columns if there are many options
Ensure there is adequate spacing between adjacent fields and radio/checkbox groups

Vertical

Checked

Normal

Disabled

Extended

This option has some useful help text associated with it that elaborates on the state or purpose.

<div class="radio">
    <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Checked</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">Extended 
    <div class="text-muted">This option has some useful help text associated with it that elaborates on the state or purpose.</div>
  </label>
</div>

Inline

Checked Normal Disabled

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> Checked
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Normal
</label>

Modern BETA

Image-based radio buttons may be used as an alternative to the default browser interaction by adding .flair

Checked

Normal

Disabled

<div class="radio flair">
    <input type="radio" name="optionsRadios00" id="optionsRadiosA" value="optionA" checked>
    <label for="optionsRadiosA">Checked</label>
</div>
<div class="radio flair">
    <input type="radio" name="optionsRadios00" id="optionsRadiosB" value="optionB">
    <label for="optionsRadiosB">Normal</label>
</div>
<div class="radio flair">
    <input type="radio" name="optionsRadios00" id="optionsRadiosC" value="optionC" disabled>
    <label for="optionsRadiosC">Disabled</label>
</div>

Checkboxes

Purpose

Users need to specify which option(s) from a set are applicable/valid/true based on a label.

Description

A set of checkboxes are used when a user is able to select none, one, or multiple options
A single checkbox is used when a user is able to select or not select an option
When clicked, a checkbox’s state toggles between unchecked and checked
Checkboxes can have an indeterminate state that is set based on external interactions (e.g., indicating that some but not all items in a collection are selected)
Checkbox labels should use sentence casing
Use concise labels
Align vertically when possible
Align in shorter columns if there are many options
The selected state of a checkbox should ideally indicate something ‘positive’ and may require the rephrasing of the label (e.g., Send me weekly reminders, vs. Do not send me weekly reminders)
Ensure there is adequate spacing between adjacent fields and radio/checkbox groups

Vertical

Checked

Normal

Disabled

Extended

This option has some useful help text associated with it that elaborates on the state or purpose.

<div class="checkbox">
  <label><input type="checkbox" name="optionsCheckboxes" id="optionsCheckboxes1" value="option1" checked>Checked</label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes" id="optionsCheckboxes4" value="option4">
    Extended 
    <div class="text-muted">This option has some useful help text associated with it that elaborates on the state or purpose.</div>
  </label>
</div>

Inline

Checked Normal Disabled

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1" checked> Checked
</label> 
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Normal
</label>

Modern BETA

Image-based checkboxes may be used as an alternative to the default browser interaction by adding .flair

Checked

Normal

Disabled

<div class="checkbox flair">
	  <input type="checkbox" name="optionsCheckboxesZ" id="optionsCheckboxesZ" value="option1" checked>
	  <label for="optionsCheckboxesZ">Checked</label>
	</div>
	
	<div class="checkbox flair">
	  <input type="checkbox" name="optionsCheckboxesF" id="optionsCheckboxesF" value="option1">
	  <label for="optionsCheckboxesF">Normal</label>
	</div>
	
	<div class="checkbox flair">
	  <input type="checkbox" name="optionsCheckboxesG" id="optionsCheckboxesG" value="option1" disabled>
	  <label for="optionsCheckboxesG">Disabled</label>
	</div>

Toggle switches

Purpose

Users need to toggle an option between on/off or yes/no.

Description

Use a toggle switch for a binary option where the change occurs immediately. Use a checkbox instead if the user has to perform other actions for the change to be effective (e.g., pressing Save or Submit).

Access

Send alerts

Disabled on

Disabled off

<div class="switch">
    <input type="checkbox" id="t1">
    <label for="t1" data-on="ON" data-off="OFF">Access</label>
</div>

Select

Purpose

The user needs to choose an option from a predefined set.

Description

A select, sometimes referred to as a combo box, provides functionality for choosing an option from a set
It is similar to dropdown button but facilitates item selection, filtering, and reflects the currently selected value
When clicked, the user is shown all available options and can make a selection
When a selection is made, the dropdown closes and the select control updates to reflect the current selection
If there are 5 or more options, the list should allow for filtering via a text field
For empty selects, use a placeholder in the format of Select a [type]... or Select...

Example uses https://github.com/ivaynberg/select2 for demo purposes.

Normal

Filterable

Placeholder

Disabled

<div class="form-group">
    <label for="se17" class="col-sm-3 control-label">Normal</label>
    <div class="col-sm-9">
        <select id="se17" class="form-control select2">
            <option value="A">Option A</option>
            <option value="B">Option B</option>
            <option value="C">Option C</option>
        </select>
    </div>
</div>

Multi-select

This is the native browser multi-select. ctrl+click (or cmd+click) toggles selection on an item. shift+click performs a range selection. A single click sets the selection to only that item.

<div class="form-group">
    <label for="se16" class="col-sm-3 control-label">Disabled</label>
    <div class="col-sm-9">
        <select multiple id="se16" disabled class="form-control">
            <option value="A">Option A</option>
            <option value="B">Option B</option>
            <option value="C">Option C</option>
            <option value="D">Option D</option>
        </select>
    </div>
</div>

Date picker

Depending on the JS library used for the date picker, functionality may vary.

Date pickers can provide:

Navigating years and months via previous/next arrows and/or other dropdowns
Multi-calendar views
Range highlighting
Min and max allowable dates
Highlighting/disabling of days/rows/columns (e.g., disable weekends or highlight bi-week)
Ability to type date as well as use a calendar dropdown

Example uses jQuery UI for demo purposes.

<div class="form-group">
    <label for="dp1" class="col-sm-3 control-label">Date</label>
    <div class="col-sm-9">
        <span class="input-icon icon icon-calendar-o"></span>
        <input id="dp1" data-inputmask="'mask': 'm/d/y', 'placeholder': 'mm/dd/yyyy'" type="text" class="datepicker form-control" >
    </div>
</div>
<div class="form-group">
    <label for="dp2" class="col-sm-3 control-label">Range</label>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-6">
                <span class="input-icon icon icon-calendar-o"></span>
                <input id="dp2" placeholder="From" data-inputmask="'mask': 'm/d/y', 'placeholder': 'mm/dd/yyyy'" type="text" class="datepicker form-control" >
            </div>
            <div class="col-sm-6">
                <span class="input-icon icon icon-calendar-o"></span>
                <input id="dp3" placeholder="To" data-inputmask="'mask': 'm/d/y', 'placeholder': 'mm/dd/yyyy'" type="text" class="datepicker form-control" >
            </div>
        </div>
    </div>
</div>

Time picker

Depending on the JS library used for the time picker, functionality may vary.

Time pickers can provide:

Up/down keyboard selection
Incremental time selection (example: 10min/15min/30min/45min)
Dropdown with time selection

Example uses bootstrap-timepicker for demo purposes.

 <div class="row">
        <form role="form" class="col-sm-12 form-horizontal">
            <label class="col-sm-3 control-label">Label</label>
            <div class="input-group bootstrap-timepicker timepicker">
                <span class="input-group-addon"><i class="icon icon-clock-o"></i></span>
                <input id="timepicker-freeform" type="text" class="form-control input-small">
            </div>
        </form>
    </div>

Slider

Depending on the JS library used for the slider, functionality may vary.

Sliders can provide:

Min and max allowable values
Visible ticks (or pips)
Step increments
Multi-handle range

Example uses https://github.com/leongersen/noUiSlider for demo purposes.

<div class="form-group">
    <label for="se15" class="col-sm-3 control-label">Normal</label>
    <div class="col-sm-9">
        <input class="slider" type="number">
    </div>
</div>

Rich text editor

The rich text editor allows for text input with additional formatting and inline images/links. Only include the functionality/buttons/tools necessary for the specific purpose.

<div style="max-width: 425px; margin: 0;">
    <div style="background: #f9f9f9; border: 1px solid #ccc; border-bottom:0;" class="btn-toolbar btn-toolbar-hover">
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-hover dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Arial <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li class="active"><a href="#">Arial</a></li>
                <li><a href="#">Georgia</a></li>
                <li><a href="#">Courier</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" data-toggle="tooltip" data-placement="top" title="Bold" class="btn btn-hover btn-icon-only"><i class="icon icon-bold"></i><span class="sr-only">Bold</span></button>
            <button type="button" data-toggle="tooltip" data-placement="top" title="Italicize" class="btn btn-hover active btn-icon-only"><i class="icon icon-italic"></i><span class="sr-only">Italicize</span></button>
            <button type="button" data-toggle="tooltip" data-placement="top" title="Underline" class="btn btn-hover btn-icon-only"><i class="icon icon-underline"></i><span class="sr-only">Underline</span></button>
        </div>
        <div class="btn-group">
            <button type="button" data-toggle="tooltip" data-placement="top" title="Ordered list" class="btn btn-hover btn-icon-only"><i class="icon icon-list-ol"></i><span class="sr-only">Ordered list</span></button>
            <button type="button" data-toggle="tooltip" data-placement="top" title="Unordered list" class="btn btn-hover btn-icon-only"><i class="icon icon-list-ul"></i><span class="sr-only">Unordered list</span></button>
        </div>
        <div class="btn-group">
            <button type="button" data-toggle="tooltip" data-placement="top" title="Indent" class="btn btn-hover btn-icon-only"><i class="icon icon-indent"></i><span class="sr-only">Indent</span></button>
            <button type="button" data-toggle="tooltip" data-placement="top" title="Outdent" class="btn btn-hover btn-icon-only"><i class="icon icon-dedent"></i><span class="sr-only">Outdent</span></button>
        </div>
        <div class="btn-group">
            <button type="button" data-toggle="tooltip" data-placement="top" title="Insert link" class="btn btn-hover btn-icon-only"><i class="icon icon-chain"></i><span class="sr-only">Insert link</span></button>
            <button type="button" data-toggle="tooltip" data-placement="top" title="Insert image" class="btn btn-hover btn-icon-only"><i class="icon icon-image"></i><span class="sr-only">Insert image</span></button>
        </div>
    </div>
    <textarea name="" id="" cols="30" rows="10" class="form-control" style="border-top-left-radius: 0; border-top-right-radius: 0;" placeholder="Enter note here..."></textarea>
</div>