Textarea

Ready

A textarea allows the users enter a multi-line, free-form text.

Specifications

Component design specifications
Component design specifications

The textarea color, typography, border, width and margin specifications are inherited from the text input, for reference check the text input component documentation.

The textarea doesn't have the following text-input elements, therefore, their listed styles don't apply:

  • Action
  • Prefix / Suffix
  • Error indicator

States

States: enabled, hover, focus, error and disabled.

Textarea component states example
Textarea component states example

Anatomy

Anatomy image
  1. 1.
    Label
  2. 2.
    Helper text (Optional)
  3. 3.
    Placeholder/Value
  4. 4.
    Container
  5. 5.
    Resizer
  6. 6.
    Error message

Design tokens

Spacing

PropertyElementTokenValue
padding-leftTexarea containerspacing-81rem / 16px
padding-rightTexarea containerspacing-81rem / 16px
margin-topTexarea containerspacing-40.5rem / 8px
margin-bottomTexarea containerspacing-40.5rem / 8px

Accessibility

WCAG

WAI-ARIA

  • WAI-ARIA Accessible Rich Internet Applications 1.2 - textbox role