Components

Text Area

Design
Code

Let users enter multiple lines of text.

When you expect a large amount of text, perhaps in response to an open-ended question, qualitative feedback or notes on a game, opt for the text area over an input.

Web
React Native
Android
Apple
Other
<Textarea
  label="Tell Us More About Your Rating"
  name="assistBreakdownRatingExplanation"
  placeholder="Enter some details about why you gave that rating so we can improve"
/>

Props

label

string

The text that appears above the textarea.

name

string

A name to bind the id of the textarea to the for of the label.

required

bool

Determines whether the required text appears next to the label.

disabled

bool

Determines whether the textarea is disabled.

hasError

bool

Determine whether to show an error state (red text and border) on the input.

helpText

string
element

The text that appears below the textarea, usually to guide the user on what to provide.

hideLabel

bool

Determines whether to hide the label.

hasDivider

bool

Determines whether to show a visual divider above the textarea.

minHeight

string

Changes the min-height from the default of 200px.

className

string

Add a custom class to the form element.

textareaRef

func

A ref passed to the native textarea element.

qaId

string

A unique-enough string that appears as a data attribute in the rendered code and serves as a hook for automated tests.

Notes

  • If you pass in a value prop, be sure you also pass in an onChange prop so the component will update when the user types.
  • Native textarea props can be passed in such as value, rows, placeholder, etc.
  • Since the name attribute is passed to the textarea’s id, make sure you provide a unique name.
  • To show an error message, simply pass in hasError and put the error text in the helpText attribute.