Style Guide
Search…
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

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.
font-weight: book
font-size: 16px
color: slate-medium-dark
padding-left: 16px
padding-right: 16px
padding-top: 16px
padding-bottom: 16px
2. Structure Container for content. Input fields can be at full or half width.
border-radius: 5px
border: 1px
border color: slate-medium
background-color: off-white
max-height: 52px
max-width: 100% (343px)
min-width: 50% (168px)

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.
font-weight: book
font-size: 16px
color: red-medium
padding-left: 16px
padding-right: 16px
padding-top: 16px
padding-bottom: 16px
2. Structure Container for content. Input fields can be at full or half width.
border-radius: 5px
border: 2px
border color: red-medium
background-color: off-white
max-height: 52px
max-width: 100% (343px)
min-width: 50% (168px)

Anatomy of Filled Input Fields (input-[size]-filled)

1. Label (a-text-label) Indicates what kind of information the field requires.
font-weight: book
font-size: 10px
color: slate-medium-dark
padding-left: 16px
padding-right: 16px
padding-top: 8px
padding-bottom: 3px
2. Content (a-text-paragraph) User generated text
font-weight: book
font-size: 16px
color: text-black
padding-left: 16px
padding-right: 16px
padding-bottom: 8px
3. Structure Container for content. Input fields can be at full or half width.
border-radius: 5px
border: 1px
border color: slate-medium
background-color: off-white
max-height: 52px
max-width: 100% (343px)
min-width: 50% (168px)

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.
font-weight: book
font-size: 10px
color: red-medium
padding-left: 16px
padding-right: 16px
padding-top: 8px
padding-bottom: 3px
2. Content (a-text-paragraph) User generated text.
font-weight: book
font-size: 16px
color: red-medium
padding-left: 16px
padding-right: 16px
padding-bottom: 8px
3. Structure Container for content. Input fields can be at full or half width.
border-radius: 5px
border: 2px
border color: red-medium
background-color: off-white
max-height: 52px
max-width: 100% (343px)
min-width: 50% (168px)

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 modified 2yr ago
Copy link
On this page
Usage of Input Fields
Types of Input Fields
Anatomy of Unfilled Text Field (input-[size]-unfilled)
Anatomy of Unfilled Text Field - Error State (input-error-[size]-unfilled)
Anatomy of Filled Input Fields (input-[size]-filled)
Anatomy of Filled Text Field - Error State (input-error-[size]-filled)
Animation