You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Text Area

A text area allows users to enter and edit longer text, often on multiple lines or in a paragraph.

View source

Label

1
import {Label, TextArea} from '@coveord/plasma-react';
2
import {useState} from 'react';
3

4
export default () => {
5
    const [value, setValue] = useState('');
6

7
    return (
8
        <div className="input-field">
9
            <TextArea
10
                id="textarea-1"
11
                value={value}
12
                validationMessage="Cannot be empty."
13
                validate={(val) => !!val.trim()}
14
                onChange={(e) => setValue(e.currentTarget.value)}
15
                additionalAttributes={{required: true}}
16
                isAutosize
17
            >
18
                <Label htmlFor="textarea-1">Label</Label>
19
            </TextArea>
20
        </div>
21
    );
22
};

Props

Name	Type	Default	Description
`id`required	`string`		Unique identifier
`additionalAttributes`	`TextareaAutosizeProps`		Additional HTML attributes to add on the
`children`	`ReactNode`
`className`	`string`		Additional CSS classes to add on the textarea element
`disabled`	`boolean`		Whether the textarea should be disabled
`disabledOnMount`	`boolean`		Whether the textarea is disabled on mount. Use with TextAreaConnected. Only useful in a Redux context.
`isAutosize`	`boolean`	`false`	Whether the textarea automatically grows in height when new lines are added
`onChange`	`ChangeEventHandler<HTMLTextAreaElement>`		A callback function executed when the value of the textarea changes event–The change event
`onChangeCallback`	`(event: ChangeEvent<HTMLTextAreaElement>) => void`		A callback function executed when the value of the textarea changes event–The change event
`onMount`	`() => void`		A callback function executed when the textarea is added to the DOM
`onUnmount`	`() => void`		A callback function executed when the textarea is removed from the DOM
`validate`	`(value: string) => boolean`		A function that tells whether the current value is valid value–The current value of the textarea
`validationLabelProps`	`ILabelProps`		Additonal props to set on the invalid message label
`validationMessage`	`string`		The text to display when the textarea is invalid
`value`	`string`		The current value of the textarea
`valueOnMount`	`string`		The value inside the textarea element on mount. Use with TextAreaConnected. Only useful in a Redux context.

Best Practices

Text areas are ideal for long sentences or paragraphs. They are commonly used to provide descriptions, notes, and messages when the information to enter is discretional to the user. The size of the input box should comfortably display four lines. A scrollbar should then allow users to view any extra lines.

Labeling

Keep titles short, preferably under three words. Provide a descriptive title without action verbs. For example, write "Note" rather than "Write a note".

Help Text and Instructions

Help text should explain how the input can be used or who will see it. For instance, if users should provide delivery instructions, the help text could be: "Provide instructions for the delivery agent". Help text should be short, preferably on one line. A placeholder provides a temporary example when the text area is empty. Use a placeholder only when showing examples of possible content is necessary to the user's understanding. When the text is discretional (e.g., email content), a placeholder is often unnecessary.

Feedback and Validation

Text areas typically accept all types of characters. Therefore, validation often only occurs due to character limits. When the character limit has been reached, the validation message should clearly state the allowed number of characters under the text area, like the text input validation. If the input can be left blank, the tag “(Optional)” must appear next to the text area title.

Variants

Type	Purpose
Fixed size	By default, the size of the text area input box is fixed. A scrollbar automatically appears if text overflows the alloted space.
Drag-to-resize	Allow users to resize the text area manually when they need to provide very long texts, such as the content of an email. Consider this option only when expecting over 500 characters or a few paragraphs. Always restrict the resizing of the text area to a maximum size based on the available space on screen. If the text overflows the alloted space (default or resized), a scrollbar automatically appears.
Autosize	Avoid using this option, as it is about to be deprecated. Autosize may cause undesired layout issues on screen, as the expanding area can push important information out of focus without the user's knowledge. Most of the time, the fixed size variant should suffice. In the rare cases where longer text is required, the drag-to-resize option is considered more appropriate.

Related Components

If your use case doesn't match the guidelines above, consider using one of the following components instead:

Text input - When users should enter no more than one line of text.
Code editor - When users need to enter code rather than plain text.

Edit guidelines