Text area
Text areas allow users to enter and edit multi-line text. They typically appear in forms.
<sl-text-area aria-label="Hobbies" value="Painting, drawing, dance..."></sl-text-area>When to use
The following guidance describes when to use the text area component.
Unconstrained input
When you need to collect input that can be of variable length, such as comments, descriptions, or notes. Use a text area when the newline character (line break) is a valid part of the content.
When not to use
The following guidance describes when not to use the text area component.
Single-line input
If the input is expected to be short and concise, consider using a text field component instead of a Text Area. For instance, when collecting a username or password a single-line input is more appropriate.
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Input container | An interactive input area. | No |
| 2 | Input & placeholder text | Input text is a value the user has entered into an input and the placeholder text is a short hint that describes the expected value of an input. | No |
| 3 | Caret | A thin vertical line that blinks to indicate where input will be inserted. | No |
| 4 | Resize handle | An indicator that appears in the bottom right corner of the input container. | No |
Figma Options
With these options, you can tweak the appearance of the text area in Figma. They are available in the Design Panel so you can compose the text area to exactly fit the user experience need for the use case you are working on.
Text Area
| Item | Options | Description |
|---|---|---|
| Size | md lg | The text area come in two sized medium (default) and large. |
| State | default valid invalid | To indicate the state of the text area. |
| Filled | boolean | To indicate if the text area is filled or displays a placeholder. |
| Input text | value | To insert the text of the filled text or placeholder. |
Label
| Item | Options | Description |
|---|---|---|
| Label | boolean | To display a label. |
| Size | sm md lg | The label come in three sizes small, medium (default) and large. |
| Disabled | boolean | To show the disabled state of the label. |
| Required | boolean | Indicates if the text area is required. |
| Optional | boolean | Indicates if the text area is optional. |
| Info | boolean | To show a info icon with tooltip after the label. |
| Text | value | To insert the text of the label. |
Hint
| Item | Options | Description |
|---|---|---|
| Hint | boolean | To display the hint. |
| Size | sm md lg | The label come in three sizes small, medium (default) and large. |
| State | default disabled invalid | To indicate the state of the hint. |
| Icon | boolean | Displays an icon in front of the hint. |
| Text | value | To insert the text of the hint. |
Focus ring
| Item | Options | Description |
|---|---|---|
| Focus ring | boolean | To display the focus state of the text area. |
Behaviours
Character limit
Use show-count to display a soft character limit. It shows remaining characters and updates as users type or paste content. At 10% remaining, it switches to a caution style. When exceeded, it shows how many characters must be removed and marks the Text Area as invalid.
Users can exceed the limit, but validation replaces the counter with an error message. Screen readers announce changes only when moving between default, caution, and danger states.
Do not combine show-count with maxlength, which blocks extra input. Also, use minlength character limits carefully, as it can create unnecessary constraints and confusion for users, and avoid using minlength together with maxlength because it may lead to repeated trial-and-error to meet both constraints instead of focusing on the quality of their input.
Resizing
By default, the Text Area can be resized vertically, meaning users can drag its bottom edge to make it taller if they need more space. The rows setting determines how tall the Text Area appears when it first loads. You can use resize="auto" to let it grow automatically as content is added, or resize="none" to keep its height fixed.
Validation
Supports required, min/max length, and custom validation, with feedback appearing when validity is reported. Required fields are invalid when empty, minimum length applies after input begins, and custom validation can be synchronous or asynchronous, with final results withheld until asynchronous checks complete.