Input

Area where users can enter in information

Image of an input

Example of an input

 

Anatomy

  1. Container: holds placeholder or entered information
  2. Icon: optional visual to give additional clarity to user
  3. Placeholder text: optional text to give users an example of input they can give
  4. Text cursor: cursor that displays as user is adding input
  5. Entered text: user’s input
Image of input anatomy

Visual reference for anatomy

 

 

Variants

There are 4 variants of the component: with placeholder text, entered text, icon and text cursor.

Visual representation of variants

Visual representation of variants

 

 

 


Designer resources