Forms - Style guide

Best practices

The Basics

Input type should always be defined to ensure the appropriate keyboard is shown on mobile devices. (complete list of types below)
When focusing in an input field on mobile, ensure the field displays above the keyboard.
If the form is the primary element on the page (ex: login or sign up page) the cursor should be focused in the first field.
If the form is the primary element on the page, and the first field is a default name (ex: search alerts) the field should be focused, and all text selected so that the user can immediately type a new name.
Return/Enter should submit the form.
Phone number fields should use masks to ensure users understand the expected format and don’t have to type characters like parenthesis or dashes.
Fields should only allow expected entries. Ex: ZIP field should only allow 5 numeric-only characters.
The size of fields should reflect the expected entry. Ex: ZIP field should be shorter than an email or name field.
When needed, a tabindex should be applied.

Input Types

input type="text" displays the normal mobile device keyboard
input type="email" displays the normal keyboard plus ‘@’ and ‘.com’
input type="tel" displays the numeric 0-9 keypad
input type="number" displays a keyboard with numbers and symbols

Layout and spacing

Form layout utilizes <fieldset class="field-group"> and <div class="field"> from the cars-ui library to standardize spacing and adjacent behaviors. View the Form spacing page for a visualization of the spacing values.

“Melded” fields

Use “melded” or attached fields in widgets or forms where space is at a premium. These forms should include only (or mostly) dropdowns to alleviate the need for helper or error text display adjacent to the fields. (Form errors should be addressed above or around the entire form itself.)

Buttons that are part of the “melded” form should also be attached and the corners rounded accordingly to complete the shape.

Documentation around form elements: