Text Fields (Dropdown)

Date Pickers allow users to input a single date by selecting
from a calendar view.

Variants

Dropdown
Variant Usage

Default

Dropdown text field on load state

Active

Dropdown item selected

Disabled

Dropdown is not available for input

Error

Dropdown text field is validated with an error

Dropdown Set

Dropdown field expanded to reveal list of dropdown items

Anatomy

Date Picker 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. Icon : Chevron button for the user to launch dropdown list.
  3. Placeholder/Input: Where input details will fill up the field.
  4. Line: Containers can expand, and can be solid or outlined.
  5. Inline message: For validation messages.
  6. Dropdown box: Panel that contains all dropdown items.
  7. Dropdown Item: Options for the user to pick.
  8. Scroll: Appears when there is an overflow of items in the Dropdown box.

 

Size

Textfield should have a fixed width. (87.73% of screen size). Dropdown box has a variable height dependent on the amount of items within the list.

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
Use inline messages only when necessary,i.e. error messages
dontimg
Truncate text labels.