Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
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

Was this helpful?

  1. Native

Input Fields

PreviousIcon ListsNextMarketing

Last updated 5 years ago

Was this helpful?

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).

1. Unfilled Input
2. Unfilled Input Field - Error State
3. Filled Input Field
4. Filled Input Field - Error State