Input Controls

Input controls are elements that allow users to enter and interact with data in a variety of ways.


Primary Buttons

Primary buttons are the buttons generally "attached" to the footer of a dialog, and generally cause changes to - or to all the data within - the entire dialog when clicked.

sp1gv-inputcontrols-buttons-primary
Primary Button
Secondary Button
Disabled Button

Static State

btn-primary-primary
btn-primary-secondary
btn-primary-disabled

Hover State

btn-primary-hover
btn-primary-hover

Click State

btn-primary-hover
btn-primary-hover

Secondary (small) Buttons

This set of secondary buttons should be used when there is already a set of Primary buttons being used on a form or element, and additional, smaller tasks must be performed and committed within the dialog. These buttons will allow for extended interaction, while maintaining the visual hierarchy of available functions.

sp1gv-inputcontrols-buttons-example sp1gv-inputcontrols-buttons-secondary
Primary Button
Secondary Button
Disabled Button

Static State

btn-secondary-primary
btn-secondary-secondary
btn-secondary-disabled

Hover State

btn-secondary-hover
btn-secondary-hover

Click State

btn-secondary-hover
btn-secondary-hover

Text Entry Fields

Text fields allow users to enter their own data into the fields. Occasionally, text fields can be Read-Only and display information related to what the user is entering in another field. You'll also notice an example of a required field, with a space and a small red asterisk to the right of the field label.

sp1gv-inputcontrols-textfields-example stylingexample

Checkboxes and Radio Buttons

Checkboxes should be used when a user needs to be able to select multiple items at once. Often, items that are listed with check boxes are options or preferences that do not necessarily over ride each other. (ie. It stills make sense and functions for the user to decide that their hotel room be both non-smoking AND on the lower floor.)

Radio buttons should generally be used when the user should only be allowed to select one option out of a group. Often, this can be an option group as simple as "Yes" and "No."

sp1gv-inputcontrols-checkboxes sp1gv-inputcontrols-radios

Combo Boxes

Combo boxes afford quick and easy access to multiple related items. A combo should be accessible via keyboard or mouse click, and as a user types, the list will filter and "jump" to the closest match. The user can also use their mouse, or their up and down arrows to navigate the menu items.

All combo boxes introduced to the application should utilize the most recent, enhanced combo box control. Documentation for its use is found in this guide:

SmartFill Dropdown Dev Guide
sp1gv-inputcontrols-comboboxes

Multi-Select Lists

Multi-select lists are particularly useful when a user needs to select many items from a long list - potentially too long to fit into a drop down without creating a pain point. These lists also allow for a reasonable amount of scan-ability to see what has and has yet to be selected in the list.

sp1gv-inputcontrols-multiselectlists

Editable Lists

Editable lists should be offered when the user will be able to add data and make changes to a list, such as contact information.

Two views of the data should be available; in the following example, the top image shows a page in "Summary" view.

sp1gv-inputcontrols-editablelists-01

The second example shows that the agent has clicked on the "Edit" pencil icons to activate edit mode for those sections - note that while edit mode is active for a section, the associated pencil icon is active and highlighted. This causes the section to expand and reveal the attributed data fields. Clicking "Save" would commit the changes and return the section to summary view. Clicking "Cancel" would return to summary view, without committing any changes.

sp1gv-inputcontrols-editablelists-02

Toggles

Toggles generally allow users to activate or deactivate modes or settings; the example below shows a basic toggler with two options available.

sp1gv-inputcontrols-toggle-primary

Date and Time Fields

Use these date field "pickers" when the person interacting with the application would want to easily apply a date or date range to an item (Booking, searching availability, etc.). This includes contexts where the application itself needs to apply date metadata ("date-stamp") a piece of information in order to track, filter, and sort items by by date or date order.

sp1gv-inputcontrols-pickers01
sp1gv-inputcontrols-pickers-example

Range Sliders

Range sliders are another way for users to select a range of times or dates.

sp1gv-info-rangesliders