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

Compared to a disabled textarea, read only textarea is usually used for values that user might want to copy to clipboard.

#Invalid

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

#Props

Inherits margin props.

Name	Default	Description
isDisabled	—	boolean Determines whether textarea is disabled and doesn't respond to any user interactions.
isReadOnly	—	boolean Determines whether textarea can be interacted with, but value can't be changed.
isInvalid	—	boolean Indicates that textarea value is invalid.
placeholder	—	string Placeholder to show inside textarea when value is blank.
resize	—	"none" | "horizontal" | "vertical" Resize behavior for a textarea.
value	—	string Textarea value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%" Input width.