Textarea Field

Textarea allows users to provide multiple lines of text.

Overview

Textareas allow for multiple lines of text and function very similarly to Text Fields with the addition of the rows property, which determines how tall the input will be.

Usage


Edit live code
<TextareaField id="description" label="Description" /><TextareaField id="description" label="Description" />

Content

Textarea is not resizeable by default. Make the height of the textarea proportional to the amount of text expected and provide a scroll if the input exceeds the set height.

Variations

Custom row amount

Set a custom amount of rows to show if the default is not right for the content users are expected to enter.


Edit live code
<TextareaField id="description" label="Description" rows={5} /><TextareaField id="description" label="Description" rows={5} />

Resizable

In some cases it can be useful to set the textarea to be resizable if it is not clear how much text will be entered.


Edit live code
<TextareaField id="description" label="Description" resizable /><TextareaField id="description" label="Description" resizable />

Character Limit

Set characterLimit to show a live character count against a defined limit. The count updates as the user types and is shown from the start, with no threshold. Typing past the limit is never blocked — there's no hard stop — the counter switches to an error style instead, and it's up to your form validation to surface an error once the field is submitted over the limit.


Edit live code
<TextareaField id="comment" label="Comment" characterLimit={50} /><TextareaField id="comment" label="Comment" characterLimit={50} />


Edit live code
<TextareaField
  id="comment-exceeded"
  label="Comment"
  characterLimit={50}
  defaultValue="This comment is quite a bit longer than the fifty character limit allows."
  error="Comment must be 50 characters or fewer"
/><TextareaField
  id="comment-exceeded"
  label="Comment"
  characterLimit={50}
  defaultValue="This comment is quite a bit longer than the fifty character limit allows."
  error="Comment must be 50 characters or fewer"
/>

Do not use the native maxLength attribute alongside a character limit — it silently blocks further typing (a "hard stop"), which is exactly what this pattern is designed to avoid. Use characterLimit instead.

Autocomplete

Browser autofill on this field is controlled by a transitional theme property. Learn how to enable it in your app.

Properties

Name	Values	Default
id (required)	String
label (required)	String
optional	Boolean	false
hint	ReactNode
error	ReactNode
characters	Number	25
characterLimitShows a live character count against this limit. Does not block typing past it - pair with an error message on submit.	Number
fullWidth	alwaysneversmall	small
rows	Number	3
resizable	Boolean	false
autoCompleteDefaults to "off" when the disableAutocomplete theme config flag is enabled (see the Theme guide); pass autoComplete to override for a specific field.	String
...	JSX.IntrinsicElements["textarea"]

Text Field