Textarea Preview

A textarea allows people to enter long, free-form text data, like a comment.

If you only need someone to enter one line of information, try an input instead.

Loading...
Open in CodeSandbox
Textarea storybook
React guidance

Properties

appearance

Styling the Textarea should use.

“outline” “filled-darker” “filled-lighter” “filled-darker-shadow” “filled-lighter-shadow”
Default:
“outline\n\nNote: ‘filled-darker-shadow’ and ‘filled-lighter-shadow’ are deprecated and will be removed in the future.”

as

“textarea”
Default:
none

defaultValue

The default value of the Textarea.

string
Default:
none

onChange

Callback for when the user changes the value.

((ev: ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void)
Default:
none

resize

Which direction the Textarea is allowed to be resized.

“none” “both” “horizontal” “vertical”
Default:
“none”

root

Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus indicator border animation. For more information, see Spec.md

The root only receives className and style . All other props are applied to the textarea slot.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

size

Size of the Textarea.

“small” “medium” “large”
Default:
“medium”

textarea

The <textarea> element. This is the primary slot, all native props and ref are applied to this slot.

WithSlotShorthandValue<{ as?: "textarea"; } & Pick<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "key" | keyof TextareaHTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

value

The value of the Textarea.

string
Default:
none