Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Textarea

Version 10.2.0GithubStorybook

A Textarea is a form element that allows users to enter text on multiple lines.

Installation

Installation page anchor
yarn add @twilio-paste/textarea - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {TextArea} from '@twilio-paste/core/textarea';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';

const Component = () => (
  <>
    <Label htmlFor="foo" required>
      foo
    </Label>
    <TextArea onChange={() => {}} aria-describedby="foo_text" id="foo" name="foo" placeholder="foo" required />
    <HelpText id="foo_text">Enter some text.</HelpText>
  </>
);

Props

Props page anchor

TextArea

TextArea page anchor

disabled

Disables the textarea.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TEXTAREA

hasError

Sets the textarea to an error state.

Type
boolean

height

The height of the textarea is strictly controlled by the component

Type
never

id

Sets the id of the textarea. Should match the htmlFor of Label.

Type
string

insertAfter

Ability to insert icon or other element to the left of the textarea.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

insertBefore

Ability to insert icon or other element to the right of the textarea.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

maxRows

Adjust how big the textarea should grow as the user types into it.

Type
number
Default
10

name

Sets the name of the textarea.

Type
string

placeholder

Sets the placeholder of the textarea.

Type
string

readOnly

Sets the input to readonly.

Type
boolean

required

Sets the input as required.

Type
boolean

resize

Sets the resize property of the textarea. We only support vertical resizing.

Type
"none" | "vertical"
Default
none

size

The size of the textarea is strictly controlled by the component

Type
never

variant

Choose between default or inverse styles for the textarea.

Type
TextAreaVariants
Default
default

width

The width of the textarea is strictly controlled by the component

Type
never