Horizontal Forms

Text Inputs

Text fields validate input, help users fix errors, autocomplete words, and provide suggestions. They allow users to enter either a single line or multiple lines of text. Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

Plain Text

Static controls are for placing plain text next to a form label in the context of a form.

Checkboxes

Checkboxes allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary.

Switches

A switch, also known as a toggle button, allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.

Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

Radios

Radio buttons are used to allow users to select one item at a time.

Select / Multi-select

Select fields allow the user to pick from a predetermined list of options, such as a list of states or credit card types. The select fields can either show one and expand the list when the user clicks in the area or they can be listed out with a commit button, such as Submit or OK.

File Pickers

By default the HTML <input type="file" /> control does not allow styling via CSS attributes.

Therefore, the GEL styles an adjacent element, positions it over the <input type="file" /> element, and configures all mouse events to pass through to the underlying input.

Date / Time Pickers

The GEL recommends custom date and time pickers to get consistent cross-browser support.

Inline Date / Time Pickers

In addition to the default input with dropdown style, date / time pickers can be displayed inline.

Form Buttons

For lengthy or complex forms, it is recommended to place buttons on the left of the form, with the affirmative button to the left of the dismissive button.