Skip to content

Textarea

Components4.3.27

Description

Textarea is a multiline text field. This component is useful for adding large amount of data: comment, description, link list, etc.

Sizes

Size (height in px for one row of text) Appearance example
M (28px)
L (40px)

Resize control

You can enable the resize control for the textarea to change its size. So user can stretch only horizontally, only vertically, or both vertically and horizontally.

When textarea cannot be stretched, show scrollbar after a certain number of lines. The minimum number of lines after which we recommended to use scroll is 4-5.

Do not make the textarea smaller than 160-200px in width and 3-4 lines in height. It is very difficult to work with large amounts of data in sizes smaller than these are. This is especially important when such an input is basic input in a form.

Counter

Textarea may contain a counter showing the number of entered and/or available characters, limits, etc.

The counter can be placed either next to the text label or near the textarea itself.

Size (height in px for one row of text) Input with label Input without label
M (28px)
L (40px)

Interaction

Styles of the textarea in different states correspond to the styles of the Input for such states.

State Normal Focus Disabled Read-only
Normal
Valid
Invalid

Usage in UX/UI

  • Textarea is useful when user needs to enter a large amount of data. If user needs to enter 1-3 words, use Input instead.
  • Name the textarea in such a way that user understands what data should be entered.