# Textarea

Textarea allow users to input text and digits on multiple lines.


## Overview

### Variants

We provide two versions of textarea.

*   **Default**
    
*   **Floating label** (coming soon): Can only be used in specific contexts. Limited features due to accessibility.

### Features

#### Label

All input fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.

#### Optional field indicator

We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.

#### Support text

Use this to explain how to fill in the field, for example how to count or what to include.

### Contextual help

If the label and support text aren’t enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.

*   Use a tooltip if space is limited.
    
*   Use a modal for large amounts of text.

#### Leading icon

A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed.

#### Clearable

To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.

#### Error message

Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.

### Character counter

For fields with a character limit, a counter can be added to show users how many characters they have left.

The counter starts with the maximum allowed characters. As the user types, the remaining characters decrease. When the limit is nearly reached, the counter turns yellow. When or if the user exceeds the limit, the counter turns red.

If the user ignores this and attempts to submit, an error message will appear indicating that the maximum character limit has been reached.

### Resize

The default Textarea has a fixed height based on the expected input. This helps users understand how much text the field is intended for. If the field should be resizable, there are two options:

*   **Automatic**: Adjusts dynamically as the user types.
    
*   **Manual**: Users can resize it by dragging the corner.