Back to Developer Roadmap

Textarea

src/data/roadmaps/design-system/content/[email protected]

4.0781 B
Original Source

Textarea

Text area lets users enter and edit text.

  • Disabled State: Prevents input interactions and removes its value from the form submission.
  • Placeholder: When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.
  • Label: There should be a text label linked with the text field. Clicking the label should move the focus to the field.
  • Error State: The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.
  • Focused State: The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.