Text Fields (Text Box)

Text boxes allow user to input multiple rows of text.

Variants

Text Box
Variant Usage

Default

Text box on load state

Typing

Text box as the user inputs information

Disabled

Text box is not available for input

Error

Text box is validated with an error

Anatomy

Text Box fields are made up of the following:

 

  1. Text label: All variants except for Default will have text labels, it describes what the input is for.
  2. Bounding Box: Contains the text field content.
  3. Filler Text: Placeholder text that is replaced with the text input.
  4. Word Count: Word limit for text field input.

 

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
    • Primary grey colour
       
  2. Filler message
    • Use “Body” text style on Figma
    • Inactive Grey colour
       
  3. Word count 
    • Use “Note Small” text style on Figma
    • Inactive Grey colour

 

Dos and Don'ts

doimage
Use inline messages only when necessary i.e. error messages.
dontimg
Truncate text labels.