For form usage and structure, look at Forms.

Text Field

Use text fields for single line inputs such as email, phone numbers, name, etc.

Text Area

Use text areas that may require multiple lines of input.

Required/Optional Text

Required and Optional fields should be denoted by italicized letters in primary blue body text 8px from the bottom of the input prompt.

Helper Text

Helper text should be denoted by italicized letters in primary blue body text 8px from the bottom of the input prompt (same as required/optional text).

Error Styling

• Field errors should be located 8 px below input field.
• Error icons are located 12 px from the right of the input field.
• Use the primary red

For more basic information on error styles for forms look at the Form Design Guidelines.

Basic Visual Style

Dimensions

• Each text field line has a height of 44 px.

Borders

• Text fields have a 1 px border in “lighter” grey.
• Active text fields have a 2 px border in primary blue.