Textarea

Textarea allows user to enter multi-line text.

#Example

Always pair a textarea with a form field label so the input is named for everyone, including screen reader users.

#Guidelines

#When to use

• When user input is allowed to have line breaks.

#When not to use

• If user input is restricted to one line, use a text input instead.

#Content

• Use sentence case for placeholder text.
• End placeholder text with three dots.

#Usage

#Disabled

Textarea should be disabled, when textarea shouldn't be allowed to be interacted with.

#Read only

A read only textarea shows a value and does not take focus. Add a clipboard button beside it when the value should be copied in one click.

#Invalid

Invalid textarea indicates that value isn't what the system expects.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	—	booleanDetermines whether textarea is disabled and doesn't respond to any user interactions.
isReadOnly	—	booleanShows a value that can't be edited. The field does not take focus.
isInvalid	—	booleanIndicates that textarea value is invalid.
placeholder	—	stringPlaceholder to show inside textarea when value is blank.
resize	—	"none" | "horizontal" | "vertical"Resize behavior for a textarea.
value	—	stringTextarea value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%"Input width.
onFocus	—	FocusEventHandler<HTMLTextAreaElement>Called when the field receives focus. Not called while read only.
onMouseDown	—	MouseEventHandler<HTMLTextAreaElement>Called on mouse down. Read only fields still call it after blocking focus.
tabIndex	—	numberTab order of the field. Read only fields are always -1.