TextArea

Molecule

The Text Area Component is a form input component that allows users to enter and edit longer text content, such as comments, descriptions, or messages. It supports multiline input and displays a scrollbar when the content exceeds the visible area.

Playground

Help text

Label

Validation

Label as Required Field

Placeholder

Disabled

Label

help text

        
          
            <
            TextArea

            





            
                helpText
              
                =
                "help text"
              

                label
              
                =
                "Label"
              

                labelCategory
              
                =
                "large"
              

                labelPosition
              
                =
                "labelAbove"
              

                placeholder
              
                =
                "Type here"
              



  />

Anatomy

Container - is a clickable area of the component that enables and contains user’s input.
Form Label - Tells the user what they are entering and indicates if the field is required. Can be hidden.
Scrollbar - The text entered may often be longer than the width and height of the container. In this case the text is allowed to be input, the container does not grow but allows the text to be scrollable and a scrollbar appears only then.
Help Text - optional property. It conveys additional guidance about the input field. Help Text can take up to two lines. If Text Area component has a Validation property, Help Text can be used as feedback on the value input by user, informing if the input is Valid or Invalid with appropriate icons and color coding.
Input text - It can be a placeholder text that can hold an example input text that transforms into user input once user starts typing. Avoid using placeholder text to communicate critical information because this approach is not accessible. Use labels or helper text to describe the purpose of the field and how to use it.
Cursor - A blinking cursor indicates the current location of text input in a field. It is activated when user clicks on clickable area of Text Area and while user is typing. Default HTML cursor can be used, so not shown in Figma.

States

Text Area includes Default, Hover, Focus, Focus Visible, and Locked states.
Focus is triggered by a mouse click.
Focus Visible is triggered when the user navigates to the field using the Tab key.
In both the Focus and Focus Visible states, a text caret appears to indicate that the user can enter text.
The Invalid validation state can only have Default and Hover states. When the user clicks on an Invalid Text Area, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.
The Validated validation state can only have Default and Hover states and applies only when the field contains user input (Text=Input). When the user clicks on a Validated Text Area, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.

Variants

FormLabel

Show or hide Form Label.
Toggle Required.

Text

Placeholder - sample to prompt user.
Input - user generated.

Scrollbar

Scrollbar appears when text exceeds the input area.

Help Text + Validation

Show or hide Help Text.
The Text Area supports three validation states: None, Invalid, and Validated. When validation is applied, the Help Text communicates the current validation result.
The Validated state is only available when the field contains user input (Text=Input), as an empty placeholder field cannot be positively validated.
If the Text Area has informational Help Text and a validation state is triggered, the validation message replaces the original informational message. Validation feedback always takes priority over informational Help Text.
Depending on the use case, validation may be triggered after the user submits the form or moves focus away from the Text Area after editing its value.

Properties

export interface TextAreaProps extends FormLabelOptionalProps {
  id?: string;
  placeholder?: string;
  validation?: Extract<HelpTextProps['category'], 'invalid'>;
  modelValue: string;
}

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

vue

const modelValue = defineModel<string>({ required: true });

TextArea ​