Textarea

7th lightest of the thirteen, by js weight

A native <textarea> with the same label, description and error wiring as Input. The one form control the library was missing.

Example (a11y tier)

Bio

A sentence or two. Shown on your public profile.

Release notes

Release notes are required before publishing.

Import

import Textarea from 'abaabil/textarea'         // structure only

import Textarea from 'abaabil/textarea/styled'  // + CSS

import Textarea from 'abaabil/textarea/a11y'    // + label/description/error

Two defaults that differ from the browser's

rows defaults to 3 rather than the browser's 2. Two rows is too short to read back what you just typed in almost any real form, so the browser default is one every project overrides. Overriding it once here is cheaper than overriding it everywhere.

resize is set to block, not both. A textarea the user can drag wider than the column it sits in breaks the form's layout, and nobody drags one wider on purpose. Vertical resizing, which people do want, still works.

Props

Prop	Type	Default	Tier	Description
`rows`	number	3	all	Visible line count.
`className`	string	—	all	Merged with the base class.
`label`	string	—	a11y	Rendered as a real `<label>`, associated via `htmlFor`/`id`.
`hideLabel`	boolean	false	a11y	Hide the label visually. It stays in the accessibility tree.
`description`	string	—	a11y	Help text, wired into `aria-describedby`.
`error`	string	—	a11y	Sets `aria-invalid` and joins `aria-describedby`.
`required`	boolean	false	a11y	—
`id`	string	—	a11y	Overrides the generated id.
...props	—	—	all	Everything else (`name`, `maxLength`, `onChange`, ...) lands on the `<textarea>`.