Textarea v0.1.0 Forms

Multi-line text input with label, description, and error wiring (mirrors TextField).

import { Textarea } from "latticeui-react";

Examples

Basic

Feedback

Markdown is supported.

Show code

<Textarea
  label="Feedback"
  rows={4}
  placeholder="Tell us what you think..."
  description="Markdown is supported."
/>

With error

Bio

Bio is required.

Show code

<Textarea label="Bio" error="Bio is required." rows={3} />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="textarea"][data-part="root"]`
`label`	`label`	`[data-scope="textarea"][data-part="label"]`
`input`	`textarea`	`[data-scope="textarea"][data-part="input"]`
`description`	`p`	`[data-scope="textarea"][data-part="description"]`
`error`	`p`	`[data-scope="textarea"][data-part="error"]`

Props

Prop	Type	Default
`label` *	`string`	—
`description`	`string`	—
`error`	`string`	—
`...rest`	`React.TextareaHTMLAttributes<HTMLTextAreaElement>`	—

Accessibility

Roles: textbox (native)

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="textarea"][data-part="input"] {
  /* your overrides */
}

State attributes: data-invalid