Textarea

The Textarea component enables users to input text spanning multiple rows, ideal for longer entries. For shorter input, consider utilizing the Input component.

API Reference

Prop	Type	Default
`label`	`string`	-
`value`	`string`	-
`placeholder`	`string`	-
`minlength`	`number`	-
`maxlength`	`number`	-
`rows`	`number`	`10`
`disabled`	`boolean`	`false`
`error`	`boolean`	`false`
`errorMessage`	`string`	-
`instruction`	`string`	-
`required`	`boolean`	`false`
`resize`	`boolean`	`false`
`sideAlign`	`boolean`	`false`
`autocomplete`	`string`	-
`autocorrect`	`AutoCorrectModes`	`on`
`readonly`	`boolean`	`false`

Usage

General Guidelines

Do's

Enable copy/paste functionality to enhance usability.
Ensure that the text field adjusts to accommodate the expected input size, allowing users to view their entire entry comfortably.
Craft precise and explicit error messages to guide users in resolving errors effectively.
Utilize text input areas for lengthy expected inputs, providing ample space without necessitating excessive scrolling.

Don'ts

Avoid using placeholder text in text fields, which might not be recognized by screen reading software, leading to accessibility issues.
Do not enforce a mandatory minimum input of characters.
Avoid restricting the use of uncommon or special characters.
Do not disable copy and paste functions.

Writing Guidelines

When to use

When users need to input longer passages of text, such as comments, feedback, or descriptions.
When there's a need for multiline input, allowing users to enter text that spans across multiple lines.
When providing a space for users to compose messages, write articles, or fill out forms that require more extensive textual input.
When capturing free-form data where the length of the input is unpredictable, such as user-generated content or notes.
When allowing users to input structured data that doesn't fit well into predefined fields, providing flexibility in data entry.

When not to use

Avoid using text areas when the user is required to input a large or unspecified amount of data.
When the input requires specific formatting or validation that is easier to enforce with single-line inputs or other form controls.

Use Case

General Use Cases

Text Area are typically use for composing blog posts, articles, descriptions, or any content requiring multiple paragraphs.

Also textareas are used to gather user feedback, reviews, or specific details in online forms or applications.

Digital Health Use Cases

For Digital Health Applications text area can be used for the user to provide detailed information about their medical history, including past conditions, surgeries, or allergies.

During online consultations, patients can use textareas to describe their symptoms in detail, aiding healthcare professionals in diagnosis.

Accessibility Guidelines

Use aria-describedby attribute to provide descriptive text for an element, offering additional context or explanation.
Add aria-label to the native control. Use this if you don't have a visible label for this control.

Textarea

Do's

Don'ts

When to use

When not to use

On this page