Form controls - FCC Design Standards

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>

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>

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.

Normal

Disabled

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

Date

Range

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