Search results

6 Input components
6.1 Buttons

Button labels should always indicate (and should usually begin with) the specific action the user will trigger by clicking the button: Email profile, Print article, Save, Log In, etc.

Examples
.btn-primary
Used for the main action(s) on a page or within a dialogue. Usually there should only be one of these on a given page, with some exceptions.
.btn-default
Used for secondary/other actions or if another color is not appropriate.
.btn-success
Used for 'Save' actions.
.btn-info
Used for 'Filter' actions or for primary actions on child elements (for example, operating on an item within a list when the primary page action operates on the whole list)
.btn-danger
Used for destructive actions (e.g. deletion or removal, especially if irreversible)
.btn-sm
A small button. This is the preferred size for use in table rows. Add one of the semantic classes above for the appropriate styling.
.btn-xs
An extra small button. Add one of the semantic classes above for the appropriate styling. 
<button class="btn [modifier class]">Button</button>
6.1.2 Button groups (radio buttons)

Button groups are used to switch between views of a page. Like tabs, but not.

Example
Present project View Edit 
<div class="btn-group">
<a class="btn btn-default">Present project</a>
<a class="btn btn-default active">View</a>
<a class="btn btn-default">Edit</a>
</div>
6.2 Forms

General guidelines

  • Natural flow is left-to-right, then down.
  • Use the appropriate HTML5 input type for the data being captured.
  • For forms that only contain a single text input, ensure that the user can submit the form by hitting enter within the input.
  • If a given page or dialogue is primarily form-based, autofocus the first field on page load.
  • Always apply labels to inputs.
    • For required inputs, always indicate that the field is required by adding the required-label class.
    • Top-align labels when possible.
  • ‘Save’ actions should use a green button positioned at the bottom of the form, on the left, and contained within a footer bar. If the form’s layout uses a single column, this should be left-aligned with the form inputs; otherwise, place the action on the left.
  • If a secondary action is available, it may take one of two forms:
    • ‘Cancel’ actions are used to back the user out of the form without saving, and should be displayed as text next to the button.
    • Secondary ‘save’ actions (e.g. save and return later, save without continuing to next step) should be placed to the right of the primary save button.
  • If an input requires a user to select from fewer than 4 options, radio buttons are prefered over selects.
  • For standard labels, use the caps-label class.
  • For longer labels utilizing a phrase, question, or statement, do not capitalize.
6.2.1 Filter forms
  • Filters are generally used in combination with a table, in which case they should contain the data to be filtered using the list-table-container and search-filter-container classes.
  • In contrast with standard select elements, dropdowns within a filter set (whether single- or multiselect) should not have a null state. They should instead indicate what is selected, e.g. 'All facilties' or 'Default organizations.'
  • Filters should always represent the data visible on the page after the filter has been applied.
  • If a dropdown filter is set to a non-default value, it should be given a blue highlight (using the selected-filter) class.
  • If >0 dropdowns in a filter set are in a non-default state, a 'Reset' button should be added to the right of the 'Filter' button.
  • The 'Filter' and 'Reset' options always appear immediately to the right of the first row of filter inputs.
  • The 'Export' option (if it exists) should be right-aligned within the cotnainer and vertically aligned with the first row of inputs.
  • If more than one row of filter inputs is required, display a 'More options' link that reveals the additional row(s) of inputs when clicked.
Example 
<div class="form-container">
    <form class="search-filter filter-form form-inline" method="GET" data-changefields="state">
        <div id="search-filter-container">
            <fieldset>
                <label for="id_query">
                    <label>Search<br />
                        <input type="text" name="query" autocomplete="off" id="id_query" placeholder="Placeholder text" class="form-control" maxlength="75" />
                    </label>
                </label>
                <label for="id_state">
                    <span class="muted">Object state</span><br />
                    <select name="state" class="form-control input-medium">
                        <option value="1">All good choice</option>
                        <option value="2" selected>Some other choice</option>
                        <option value="3">Pretty good choice</option>
                        <option value="4">The right choice</option>
                    </select>
                </label>
                <label> <br />
                    <button type="submit" class="btn btn-info ">Filter</button>
                </label>
            </fieldset>
        </div>
    </form>
</div>
6.2.2 Fieldsets
  • Use the section-title element to separate individual fieldsets within a form.
  • Fieldsets shoud be indented 30px from the left of the section-title.
Example
Secondary details
<form class="standard-form">
    <h5 class="section-title">Secondary details</h5>
    <fieldset>
        <label class="caps-label required-label">Honorific</label>
        <input class="form-control display-block" type="text" placeholder="e.g. Capt., Esq., Serene Highness">
        </label>
    </fieldset>
</form>
6.2.3 Select

A dropdown select box. Whenever the options in a select are fixed (not populated by user data), try to ensure that the longest option is fully legible when selected.

  • For standard form select elements,use an em dash (—) to indicate the null state.
  • For filters, when everything is selected, use text in the form ‘All facilities…’.
Example 
<div class="row">
    <form class="standard-form col-md-3">
        <label class="caps-label required-label">
            Facility
        </label>
        <select class="form-control">
            <option>All facilities</option>
            <option>Facility 1</option>
            <option>Facility 2</option>
            <option>Facility 3</option>
        </select>
    </form>
</div>
6.2.4 Multiselect

A custom multiselect widget (documentation).

  • When more than 15 options are shown, the filter and select all options should be enabled.
  • The dropdown's height should be limited to a maximum of 350 pixels so that the user isn't required to scroll down the page to see all the options.
  • By default, show '–' (em dash) for no selection, 'All [object name]' for all selected, '[option value]' for 1 option selected, and '[n] selected' when more than 1 option selected.
Example 
<div class="row">
    <form class="standard-form col-md-3">
        <label class="caps-label required-label">
            Stakeholders
        </label>
        <select class="form-control multiselect" multiple="multiple">
                <option>Earl    James
                <option>Anna    Ramirez</option>
                <option>Donald  Perry</option>
                <option>Phyllis Gonzalez</option>
                <option>Diane   Powell</option>
                <option>Ruby    Murphy</option>
                <option>Russell Foster</option>
                <option>Gregory Wright</option>
                <option>Jennifer    Moore</option>
                <option>Ryan    Cox</option>
                <option>Louis   Rogers</option>
                <option>Tina    Butler</option>
                <option>Jesse   Bailey</option>
                <option>Doris   Adams</option>
                <option>Marilyn Robinson</option>
                <option>Henry   Patterson</option>
                <option>Kathryn Thompson</option>
                <option>Heather Diaz</option>
                <option>Eugene  White</option>
                <option>Eric    King</option>
                <option>Kelly   Hill</option>
                <option>Mark    Wilson</option>
                <option>Marie   Scott</option>
                <option>Timothy Henderson</option>
                <option>Bruce   Bryant</option>
        </select>
    </form>
</div>
6.2.5 Radio buttons (inline)
  • When using short individual options (yes/no, or up to 4 words), horizontally aligning the buttons on one line is preferred; otherwise, stack vertically.
  • When using radio buttons, a default option should always be selected; if no default is desired, use a select instead.
  • Individual radio button options should not be capitalized/muted. Apply the radio-label class.
Example 
<label class="display-block">Are you filling out this form on behalf of someone else?</label>
<label class="radio-label radio-inline">
    <input type="radio" name="id_requester" value="Yes" checked> Yes
</label>
<label class="left-space-small radio-label radio-inline">
    <input type="radio" name="id_requester" value="No"> No
</label>
6.2.6 Radio buttons (stacked)
  • Individual radio button options should not be capitalized/muted. Apply the radio-label class.
Example 
<label>Which of these is your favorite?</label>
<div class="radio">
    <label class="radio-label">
        <input type="radio" name="id_book" value="1" checked> <em>A Study in Scarlet</em>, by Sir Arthur Conan Doyle
    </label>
</div>
<div class="radio">
    <label class="radio-label">
        <input type="radio" name="id_book" value="2"> <em>Madame Bovary</em>, by Gustave Flaubert
    </label>
</div>
<div class="radio">
    <label class="radio-label">
        <input type="radio" name="id_book" value="3"> <em>The Brothers Karamazov</em>, by Fyodor Dostoevsky
    </label>
</div>
6.2.7 Checkboxes
  • Always ensure the checkbox and its entire label are clickable, not just the box itself.
  • Checkbox labels are lowercase — use the .checkbox-label class.
  • Any text or label associated with a checkbox should follow the checkbox to the right, rather than text first followed by a checkbox.
  • “Select all” checkboxes should be labeled appropriately with the aligning action.
    • For example, if the checkbox is to select all items below to delete, the label should read “Delete all [items].”
Example 
<label>Reactor startup sequence</label>
<ul class="list-style-none">
    <li>
        <label class="checkbox-label">
            <input type="checkbox"> Verify gamma-ray dose rate
        </label>
    </li>
    <li>
        <label class="checkbox-label">
            <input type="checkbox"> Clear SCRAM signal
        </label>
    </li>
    <li>
        <label class="checkbox-label">
            <input type="checkbox"> Place neutron start-up source
        </label>
    </li>
    <li>
        <label class="checkbox-label">
            <input type="checkbox"> Lower control rods
        </label>
    </li>
</ul>
6.2.8 Text inputs

Text inputs should generally contain a placeholder. In most cases it’s best that the placeholder be an example of the sort of input the user should type in; if this doesn’t make sense or doesn’t read well, the text should be instructional instead (but shouldn’t be duplicative of the label).

Example 
<form class="standard-form">
    <label class="caps-label">Favorite vegetable
        <input class="form-control display-block" type="text" placeholder="e.g. Brussels sprouts">
    </label>
</form>
6.2.9 Textareas

Textareas, like text inputs, should usually have a placeholder. In most cases it’s best that the placeholder be an example of the sort of input the user should type in; if this doesn’t make sense or doesn’t read well, the text should be instructional instead (but shouldn’t be duplicative of the label). We use a small Javascript plugin called autosize that allows textareas to expand based on their content. Best practice is to limit the default height of a textarea to 2–3 lines and applying autosize.

Example 
<form class="standard-form">
    <label class="caps-label">Favorite book
        <textarea class="form-control" cols="40" rows="8" placeholder="Enter a description of your favorite book and the reasons you enjoy it."></textarea>
    </label>
</form>
6.2.10 Input groups (after)

Adds text before or after an input box. These should be used to denote special functionality (type-ahead input fields) or communicate formatting added by the app, and should not be used in place of a label.

Example
% 
<form class="standard-form">
    <label class="caps-label required-label">Percentage</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">%</span>
    </div>
</form>
6.2.11 Input groups (before)

Use to denote formatting added by the app, or the type of value required, e.g. '$' or 'https://'

Example
$ 
<form class="standard-form">
    <label class="caps-label">Amount</label>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">$</span>
      <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
    </div>
</form>
6.2.12 Date Picker

When the user is required to enter a date, use the special date picker text input.

Example 
<form class="standard-form">
    <label class="caps-label">Start date</label>
    <div class="form-group has-feedback">
        <div class="controls">
          <input type="text" class="form-control date-picker" id="date" name="date">
          <span class="glyphicons glyphicons-calendar form-control-feedback"></span>
    </div>
</form>
6.3 Validation errors

Users should receive automatic feedback if their input is invalid. Errors messages give direct and succinct feedback as to why the input was incorrect. These can be used in instances of missing a required field, selecting options from a drop down that produce invalid results, entering something in a format that isn’t accepted, etc.

  • Field-level messages will appear directly under the input field from which the error originates.
  • The originating field should also be highlighted by displaying its border using the danger color.
  • If filters are set in such way to product invalid results (ex: choosing an end date that is before the start date in a date picker), an error message appears after the user hits the filter button and the results below should not filter.
    • This behavior is still true if the user selects more than one filter setting and only one of the settings was invalid.
6.4 Form footer
  • Save buttons should use the btn-success class and should be aligned with the form fields above.
  • If there's an opportunity for the user to back out of a form and return to the previous screen (or close a dialogue), provide a cancel option next to the save button.
Example
or cancel 
<form class="standard-form">
    <div class="well-bottom-anchor">
        <button type="submit" class="btn btn-success"><span class="save-button-text">Save</span></button>
        or <a href="#">cancel</a>
    </div>
</form>
6.5 Input help text
  • Help text should leverage the small, normal-case, and normal-weight classes to distinguish it from the label text
  • Additional helper classes can be used to align the help text properly, such as form-help-checkbox
Example 
<label>
    My label text
    <div class="small muted normal-weight normal-case">With explanatory help text.</div>
</label>