Textarea

 

 

Anatomy

1. Container: box that holds user input
2. Text cursor: cursor that displays as user is adding input
3. Placeholder text: optional text to give users an example of input they can give
4. Entered text: user’s input
5. Resize handle: element that gives users the control to resize the textarea

 

 

Variants

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

• Placeholder text: If you want to show users an insight into what type of input they can give
• Text cursor: designers, you can add this variant to your prototypes if needed
• Entered text: Shows what the user input
• Resize handle: only display if user has the ability to control the size of the input area in the platform

 

 

 

---

Designer resources