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

 

 

Variants

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

 

 

 

---

Designer resources