<h2>When to use</h2>
<p>The text area and text input components have different use cases. Consider character length and the type of input when choosing which to use.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Text area</td>
<td>If text exceeds more than one line, use the text area component. The larger field size encourages longer responses. It’s typically used for comments or questions in forms.</td>
</tr>
<tr>
<td><a href="/components/text-input/">Text input</a></td>
<td>For single-line, short entries, use the text input component. It’s commonly used for name, phone number, or email entries in forms.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The anatomy of the text area component, labeled 1 through 6.","caption":"The text area component contains six main elements, including options to display a character counter, placeholder text inside the input, helper text, and an error state.\n\n1. Label: describes the field entry requirement.\n2. Placeholder text: optional text within the input field.\n3. Helper text: describes the format or guidelines for the text entry.\n4. Live character counter: optional counter to display limitations on character counts.\n5. Text area: input field for text.\n6. Error state: inline validation error text, icon, and error message.","url":"https://dds.dell.com/site/production/2d/95/Text_Area_Anatomy_b748e16613.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/required-fields/","type":"External"},"title":"Required fields in forms","description":"Read the Nielsen Norman Group&#39;s article on form fields.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/web-form-design/","type":"External"},"title":"Website forms usability","description":"Read the Nielsen Norman Group&#39;s article on forms usability.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Character counter

For fields with character limits, users will see a dynamic count displayed above the text area. When the limit is exceeded, the text and counter will display the error state and change color (Red 700).

### Errors

Generally, there are two validation errors for this component: empty required fields and exceeding the character limit. In those scenarios, the text changes color (Red 700) and a warning [icon](/foundations/icons/) appears in the field. An error message also displays under the input. Do not display helper text and error messages at the same time.

### Helper text

Helper text appears below the text field. Its purpose is to provide assistance in filling out the relevant field. Keep the content concise. Use as few words as possible to guide users and help them avoid making errors.

### Label text

Labels must accurately describe the purpose of the input fields. Every input field should have a label. Label text should be left-aligned (or right-aligned for right-to-left languages) with the input. Label text should be in sentence case and contain as few words as possible.

### Overflow

The height of the text area is customizable. As a general rule, calculate the height so that the entire text entry is visible to the user. When text entries surpass the predetermined fixed height, a native vertical scroll bar appears, which could present usability challenges, depending on the operating system, device, or browser.

### Placeholder text

Placeholder text is optional and should be used in combination with helper text. Using only placeholder text introduces accessibility concerns because the text is not read by screen readers. Placeholder text is designed to disappear when the user begins entering text, which makes it difficult for people to remember the information provided by the placeholder copy.\
\
\
When writing placeholder text in combination with helper text, consider the ways in which these pieces of content can complement each other. For example, helper text can provide the user with instructions while placeholder text can give a preview of the format for the requested information.

### Required fields

To reduce confusion and visual noise, limit optional field entries and display only those which are required. Instruct users with introductory form text that says: “All fields are required unless marked optional.” Optional fields should be written as: Label (optional).

## Sizes

There are two sizes of the text area component: large and small. Sizes should match other components within the same form. For example, if using a small text area for a mobile viewport, be sure that the other inputs—like radio buttons or checkboxes—are also small.

<details data-name='image-block' data-images='[{"alt":"Large text area component.","caption":"The height of the large text area field is 96 pixels.","url":"https://dds.dell.com/site/stage/7d/06/Text_Area_Sizes_Large_6b990053eb.png"},{"alt":"Small text area component.","caption":"The height of the small text area component is 76 pixels.","url":"https://dds.dell.com/site/stage/78/da/Text_Area_Sizes_Small_f49b530716.png"}]' data-numberofcolumns='2'></details>

## Layout

Users may resize the text area with the drag corner option, using the browser’s built-in controls. All form inputs should be sized within grid-columns and match other element sizing within the layout.

| Width         | Size                                                                          |
| ------------- | ----------------------------------------------------------------------------- |
| Minimum width | The smallest width of the text area component should be a single grid column. |
| Maximum width | The largest width of the text area component is the full width of the grid.   |

## Interaction

### Behavior and states

The text area component has five behaviors and states: rest, hover, focus, inactive, and error. In general, avoid using the inactive state unless it is part of a progressive disclosure flow, where the field becomes active only after the user has completed the previous task or answered a question.

<details data-name='image-block' data-images='[{"alt":"The states of the text area component, including rest, hover, focus, inactive, error, and read only.","caption":"","url":"https://dds.dell.com/site/production/bf/71/Select_Behaviors_States_20211015_V1_f5f00186bf.png"}]' data-numberofcolumns='1'></details>



| State     | Behavior                                                                                                                                                                                              |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest      | The rest state is the starting or ending state, indicating the text area is empty or filled.                                                                                                          |
| Hover     | When a user hovers over a selection, a highlight appears, indicating which item is selectable.                                                                                                        |
| Focus     | A blue outline appears around the text area when a user tabs or uses keyboard controls to navigate selections.                                                                                        |
| Inactive  | Inactive text areas should be used rarely and are displayed with 40% opacity, indicating the field exists but is not available to the user.                                                           |
| Error     | A validation error appears in red text (Red 700) and displays an error icon within the field. Additionally, red error messaging appears under the component.                                          |
| Read only | Read only text area components should not be marked as required, as users cannot edit values with them. However, this state should be focusable, given that users can copy the value it if necessary. |

## Standards

### Accessibility

**Make sure all labels are clear, concise, and unique**\
All users should know from the label exactly what information is needed to complete that field successfully.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)<br></br>

**Use helper text to convey instructions instead of placeholder text**\
Avoid using placeholder text to instruct users, which disappears upon selection and entry. Use a succinct and clear helper text instead.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions)<br></br>

**Make sure all helper text and error messages provide meaningful assistance in helping users avoid or fix errors**\
Don’t provide unclear helper text, such as “enter a valid email address.” Instead, make it clear how a valid email address should be formatted.\
WCAG 2.2: [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions), [3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html)<br></br>

**Make restrictive formatting requirements clear to users**\
If a field requires a specific kind of user input, such as whole numbers, or a limited number of characters, that should be communicated in advance using helper text and/or error messaging.<br></br>

### Content

**Capitalization**\
Use sentence case for labels, default values, detected values, and autocompleted text, excepting product names and proper nouns.<br></br>\
**Punctuation**\
Label text does not require punctuation, however helper text typically does. Avoid using colons at the end of label text.<br></br>\
**Label text**\
Label text should clearly state the required input in one to three words. Label text is different from helper text, so avoid using them for the same purposes.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-text-area--basic).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-text-input--basic&viewMode=docs&websiteFrame=true''></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-text-input--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-text-input--basic&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-textarea--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-textarea--docs&viewMode=docs&websiteFrame=true'></details>