Input Fields
Usage of Input Fields
Input fields allow users to enter text. Input fields are normally found within a form.
Types of Input Fields
2. Unfilled Input Field - Error State
4. Filled Input Field - Error State
Anatomy of Unfilled Text Field (input-[size]-unfilled)
The default state of a text field.
1. Label/Placeholder Text (a-text-paragraph) Indicates what kind of information the field requires.
2. Structure Container for content. Input fields can be at full or half width.
Anatomy of Unfilled Text Field - Error State (input-error-[size]-unfilled)
1. Label/Placeholder Text (a-text-paragraph) Indicates what kind of information the field requires.
2. Structure Container for content. Input fields can be at full or half width.
Anatomy of Filled Input Fields (input-[size]-filled)
1. Label (a-text-label) Indicates what kind of information the field requires.
2. Content (a-text-paragraph) User generated text
3. Structure Container for content. Input fields can be at full or half width.
Anatomy of Filled Text Field - Error State (input-error-[size]-filled)
1. Label (a-text-label) Indicates what kind of information the field requires. Can be updated to include helper text.
2. Content (a-text-paragraph) User generated text.
3. Structure Container for content. Input fields can be at full or half width.
Animation
Long Form Text
When a user taps into a long form text field, any placeholder copy should disappear so the user can start typing.
Short Form Text
When a user taps into an unfilled short text field, the Label should animate up to the left hand corner of the container (see example below).
Last updated
Was this helpful?