Text Fields

Text fields allow for the users to input and edit text.

Variants

Editable Form Fields
Non-Editable Form Fields
Variant Usage

Active

Text field as the user inputs information

Default

Text field on load state

Validated

Text box validated

Error

Text box validated with an error

Anatomy

Lined Textfields are made from the following:

  1. Text label: All variants except for Default will have text labels
  2. Line: Containers can expand, and can be solid or outlined
  3. Inline message

Size

Textfields typically fill up 3 Columns on the Desktop Grid System.

Text Style

All text labels in our buttons have the same text size

  1. Label size
    • Title Case for Label (i.e. Click here, Sign up now)
    • Use “Long Notes” text style on Figma.
       
  2. Inline message
    • Sentence Case
    • Use “Labels” text style on Figma.
       
  3. Body copy - Use “Body Main” text style on Figma.

 

Dos and Don'ts

doimage
Swap Inline message with Error message.
dontimg
Truncate text labels.