Resources
Intro & Anatomy
Textareas are form controls that enable users to enter and edit multi-line text content for longer responses and detailed information.
Use textareas when users need to provide extended text input such as comments, descriptions, messages, or any content that spans multiple lines.
Textareas automatically expand to accommodate content whilst providing users with adequate space for comfortable text entry and editing.
Options & Styles
Label & Helpers
Label is always required to provide clear context for expected input.
Hint is optional and provides additional guidance or examples.
Counter is optional and shows character limits or current count.
Icon is optional and should only be used when it provides additional benefit.
Input Values
Input value displays the user's entered text or data.
Placeholder is optional and provides example formatting or expected content.
States
Textareas have multiple interactive states:
Default for standard input appearance
Hover for interactive feedback when users engage with the field
Error for validation failures requiring user attention
Disabled
Disabled textareas show that a field exists but isn't currently available for input, e.g. when certain conditions haven't been met or the field is temporarily unavailable.
Best Practice & Usage
Textareas should provide clear context through labels and adapt to content length whilst maintaining usability.
Use textareas specifically for multi-line content where users need space for detailed responses.
Give each textarea field an associated label to provide clear context about expected information.
While placeholders are optional, labels are not. Always include a label for each textarea.
Use textareas when longer, free-form text is expected that can span multiple lines.
Don't use textareas for single lines of text, e.g. asking for a first name. Use inputs instead.
A textarea's height should always adapt proportionally to its content, though we recommend using a max-height.
Don't use inputs for any type of long-form content.
Keep error messages short and focus on providing helpful solutions.
Don't provide vague error messages that leave users guessing about what went wrong.
Display textareas full width (100vw, or 100%) on mobile for better usability.
Avoid displaying textareas smaller than full width on mobile devices.
Theming
You can customise colours, border width and radius, font styles and weights, spacings and sizes to match your design requirements.