The text area component allows users to input and edit multi-line text, such as comments, descriptions, or messages. It is typically used when longer or more detailed input is required beyond a single line field.
Styles
default: default
default: hover
default: focus-empty
default: focus-populated
default: field
default: mandatory
default: disabled
destructive: default
destructive: hover
destructive: focus-empty
destructive: focus-populated
destructive: filled
destructive: mandatory
Assistive Text
Assistive text conveys additional guidance about the input field, such as how it will be used. It should only take up one or two lines, being persistently visible or visible only on focus.
default
Helper message displayed here
destructive
Error message displayed here
Character Counter
A character counter is displayed when a character limit is set for the input field. It updates dynamically in real time as the user types or edits the content.
default
0/500
w/ assistive-text
Helper message displayed here0/500
Edge Cases
Here are a few edge cases demonstrating how to properly handle truncation of labels within select inputs.
label
w/ assistive-text
Moldova’s digital evolution is at the heart of seamless public service delivery, providing citizens with easy access to essential information.