Textarea

Textarea allows user to enter multi-line text.

#

#

#

  • When user input is allowed to have line breaks.

#

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

#

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

#

#

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

#

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

#

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

#

Inherits margin props.

NameDefaultDescription
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.

On this page

  • Example
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Usage
  • Disabled
  • Read only
  • Invalid
  • Props