Text Fields

Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Text fields are used to collect information within the context of a form or as an input for a subsequent action. Supported types include text, password, number, email and textarea.

◢

Ensure every text field includes a clear label which outlines which information should be entered in the field
Leverage placeholders to showcase an example instead of giving instructions
As required, use the field description to further describe the purpose of a field and/or include instructions on how to complete the field and describe how the information within will be used
For “Optional” fields, which aren't required, include "(Optional)" within the placeholder
When a field is a value include its unit within the field is possible

Anatomy

1. Field label
Label for the text field.

2. Field description
Use to include help, instructions or explaining how the field's information will be used.

3. Error message
Use to show an error message, as required.

4. Placeholder text
Use to set expectactions about the type of interaction / information required and indicating if a field is optional.

5. Text field
Use for short strings of text.

6. Text area
Use when text may span multiple lines.

7. Value field
Use for numeric fields, optionally can include a left or right unit/icon.

8. Search field
Use to indicate the field will trigger a search behaviour.

Specifications