Text Fields

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

Variants

Text Fields
Variant Usage

Default

Text field on load state

Typing

Text field as the user inputs information

Filled

When information has been input into the field

Disabled

Text field is not available for input

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

Textfield should have a fixed width (87.73% of screen size).

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 “label or note” text style on Figma.
       
  2. Inline message
    • Sentence Case.
    • Use “Note Small” text style on Figma.
       
  3. Body copy - Use body emphasis and black emphasis colour when in typing state.

 

Dos and Don'ts

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