Textarea
A multi-line text input component that automatically adjusts its height based on content. Ideal for comments, descriptions, and longer text entries.
Overview
- size
- medium · small · tiny
- Toggles
- autoFocus, disabled, error
All options
Size and state
Available in medium (default), small and tiny sizes.
| size \ state | enabled | error | disabled |
|---|---|---|---|
| medium | Keep it under 200 characters | ||
| small | Keep it under 200 characters | ||
| tiny | Keep it under 200 characters |
Label
Examples
Submit on Ctrl/Cmd+Enter
Use the onSubmit prop to handle submission when the user presses Ctrl+Enter (or Cmd+Enter on Mac).
Accessibility
Label
When label is set it renders a <label> tied to the textarea by id.
Error message
With error set, the textarea gets aria-invalid and aria-describedby pointing at the errorText message.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | — |
| label | string | No | — |
| value | string | Yes | — |
| onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | Yes | — |
| onBlur | (e: React.FocusEvent<HTMLTextAreaElement>) => void | No | — |
| onFocus | (e: React.FocusEvent<HTMLTextAreaElement>) => void | No | — |
| onKeyDown | (e: React.KeyboardEvent<HTMLTextAreaElement>) => void | No | — |
| onCompositionStart | (e: React.CompositionEvent<HTMLTextAreaElement>) => void | No | — |
| onCompositionEnd | (e: React.CompositionEvent<HTMLTextAreaElement>) => void | No | — |
| onSubmit | () => void | No | — |
| autoFocus | boolean | No | — |
| maxRows | number | No | — |
| disabled | boolean | No | — |
| error | boolean | No | — |
| errorText | string | No | Message shown under the field when `error` is true |
| size | 'medium' | 'small' | 'tiny' | No | — |
| placeholder | string | No | — |
| name | string | No | — |
| autoComplete | string | No | Browser autofill hint. Defaults to "off". |
| tabIndex | number | No | — |