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

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

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

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

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

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