<h2>What&#39;s new in v3</h2>
<ul>
<li><p><strong>Padding:</strong> Updated to better match the text box sizes:</p>
<ul>
<li>Small: 8px × 8px</li>
<li>Large: 16px × 12px</li>
</ul>
</li>
<li><p><strong>Error state:</strong> Removed for read‑only and disabled fields since these are not interactive and should not show errors.</p>
<ul>
<li><strong>Error icon:</strong> Was moved closer to the error message to free up space for trailing icons.</li>
<li><strong>Error input:</strong> Color now uses the text primary color for better readability and consistency.</li>
</ul>
</li>
<li><p><strong>Handle:</strong> New feature added to the component, allowing users to resize the text area by dragging.</p>
</li>
<li><p><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>Text area provides a flexible way for users to enter longer, multi‑line text.</p>
<p>Use the text area component to:</p>
<ul>
<li>Allow users to write detailed input such as descriptions, comments, or messages.</li>
<li>Support content that naturally spans multiple lines, beyond what a standard text input can accommodate.</li>
<li>Provide more comfortable editing space when users need to review or adjust larger amounts of text.</li>
</ul>
<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>Use a text area when input may extend beyond one line. The larger field provides space for longer responses and is commonly used for comments, descriptions, or open‑ended questions.</td>
</tr>
<tr>
<td><a href="/components/text-input/">Text input</a></td>
<td>Use a text input for short, single‑line entries such as names, phone numbers, or email fields.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The text area component consists of six main elements. These elements help guide users as they enter longer content and ensure clarity, accessibility, and validation.</p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of the text area component, labeled 1 through 6.","caption":"1. Label: Describes the purpose of the field and indicates when the field is required.\n2. Placeholder text (optional): In‑field hint to guide the type of content expected.\n3. Helper text: Provides additional instructions or context for the entry.\n4. Live character counter (optional): Indicator showing character limits or remaining characters.\n5. Text area: The multi‑line input field where users type their content.\n6. Error state: Displays validation feedback, including an error message and icon.\n7. Handle: Allows users to resize the text area by dragging.","url":"https://dds.dell.com/site/v3/components/text-area/text-area-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a text area when users need to enter longer or multi‑line content. It gives them enough space to write explanations, descriptions, messages, or any input that doesn’t fit well in a single‑line field.

Text areas are helpful for **collecting comments, describing issues, writing messages, adding notes, or answering open‑ended questions** where users need room to provide more detail.

Keep prompts clear and focused, ask only for the information you need, and apply character limits when appropriate. Show only one error message at a time to keep the experience simple.

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

Place helper text below the text area. Use it to guide users as they fill in the field. Keep it short and clear.

### Label text

Place helper text below the text area. Use it to guide users as they fill in the field. Keep it short and clear.

### Placeholder text

Use placeholder text only with helper text. Placeholder text alone creates accessibility issues because screen readers do not reliably announce it, and it disappears once the user begins typing.

If you use both, make sure they serve different purposes:

* Helper text can give instructions.
* Placeholder text can show a sample format.

### Required fields

Only mark fields as required when necessary, and reduce visual noise by leaving other fields unmarked.

Introduce forms with a statement such as: “All fields are required unless marked optional.”

Write optional labels as: Label (optional).

### Character counter

Use a character counter for fields with limits. The counter appears above the text area and updates as the user types.

When the limit is exceeded, change the text and counter to the error state (Red 700).

## 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/v3/components/text-area/text-area-sizes-large.png"},{"alt":"Small text area component.","caption":"The height of the small text area component is 76 pixels.","url":"https://dds.dell.com/site/v3/components/text-area/text-area-sizes-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

Text areas follow the same grid and sizing rules as other form fields. They can grow horizontally within the layout but should stay aligned with nearby inputs.

Users can resize them using the browser’s default controls, so set a minimum and maximum width to keep the form consistent.

| 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.   |

### Overflow

Text areas have customizable heights. As a general rule, size them so all entered text is visible. If content exceeds the set height, a native vertical scrollbar may appear. This behavior varies by device, browser, or operating system and can affect usability.

## Interaction

### Behavior and states

Text area component has interactive states to guide users through input and validation.

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/v3/components/text-area/text-area-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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. |

### Error state

This component supports two error types: required field errors and character limit errors.

When an error occurs, change the text color to Red 700, show a warning icon in the field, and display the error message below the input. Do not show helper text and error messages at the same time.

## 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)

#### 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)

#### 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)

#### 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.

### Content

#### Capitalization

Use sentence case for labels, default values, detected values, and autocompleted text, excepting product names and proper nouns.

#### Punctuation

Label text does not require punctuation, however helper text typically does. Avoid using colons at the end of label text.

#### 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                               | Collection | CSS var                                       | Preview  |
| ---------------------------------- | ---------- | --------------------------------------------- | -------- |
| spacing/xs                         | Semantic   | `var(--dds-spacing-xs)`                       | —        |
| text-area/min-width                | Component  | `var(--dds-text-area-min-width)`              | —        |
| spacing/sm                         | Semantic   | `var(--dds-spacing-sm)`                       | —        |
| color/text/tertiary                | Semantic   | `var(--dds-color-text-tertiary)`              | \#5C6E7E |
| input/gap/sm                       | Component  | `var(--dds-input-gap-sm)`                     | —        |
| input/padding-horizontal/sm        | Component  | `var(--dds-input-padding-horizontal-sm)`      | —        |
| input/padding-vertical/sm          | Component  | `var(--dds-input-padding-vertical-sm)`        | —        |
| text-area/min-height/sm            | Component  | `var(--dds-text-area-min-height-sm)`          | —        |
| border/radius/xs                   | Semantic   | `var(--dds-border-radius-xs)`                 | —        |
| border/width/xs                    | Semantic   | `var(--dds-border-width-xs)`                  | —        |
| color/background/SURFACE/neutral   | Semantic   | `var(--dds-color-background-surface-neutral)` | \#C5D4E3 |
| color/border/NEUTRAL/pale          | Semantic   | `var(--dds-color-border-neutral-pale)`        | \#1D2C3B |
| icon/size/xs                       | Component  | `var(--dds-icon-size-xs)`                     | —        |
| color/text/primary                 | Semantic   | `var(--dds-color-text-primary)`               | \#8C161F |
| color/border/ERROR/base            | Semantic   | `var(--dds-color-border-error-base)`          | \#8C161F |
| helper-text/gap                    | Component  | `var(--dds-helper-text-gap)`                  | —        |
| helper-text/icon/height            | Internal   | `var(--dds-helper-text-icon-height)`          | —        |
| color/text/ERROR/rest              | Semantic   | `var(--dds-color-text-error-rest)`            | \#BB2A33 |
| input/gap/lg                       | Component  | `var(--dds-input-gap-lg)`                     | —        |
| input/padding-horizontal/lg        | Component  | `var(--dds-input-padding-horizontal-lg)`      | —        |
| input/padding-vertical/lg          | Component  | `var(--dds-input-padding-vertical-lg)`        | —        |
| text-area/min-height/lg            | Component  | `var(--dds-text-area-min-height-lg)`          | —        |
| color/border/BRAND/base            | Semantic   | `var(--dds-color-border-brand-base)`          | \#00468B |
| color/text/secondary               | Semantic   | `var(--dds-color-text-secondary)`             | \#293B4D |
| color/background/SURFACE/inactive  | Semantic   | `var(--dds-color-background-surface-inactive)`| \#E1E1E1 |
| color/border/INACTIVE/base         | Semantic   | `var(--dds-color-border-inactive-base)`       | \#7E7E7E |
| color/text/inactive                | Semantic   | `var(--dds-color-text-inactive)`              | \#B6B6B6 |
| color/background/SURFACE/secondary | Semantic   | `var(--dds-color-background-surface-secondary)` | \#EBF1F6 |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-text-area--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-text-area--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-text-area--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-text-area--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-text-area--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-text-area--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Text Area