Textarea

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

Specifications

Textarea design specifications
Textarea 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 states
Textarea states

Anatomy

Textarea anatomy
  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

PropertyElementCore tokenValue
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