Textarea

Same compound API as Input, but renders a <textarea>. Controlled, uncontrolled, and consumer-controlled error state.

Features

Same compound API as Input (Label, Field, Error).

Consumer-controlled validation via invalidType.

Can be controlled or uncontrolled.

Supports all native textarea attributes.

Example

Message

Anatomy


import { Textarea } from '@wire-ui/react'
 
<Textarea.Root>
<Textarea.Label>Message</Textarea.Label>
<Textarea.Field placeholder="Type your message here..." rows={4} />
</Textarea.Root>

Styling

Textarea Field exposes the same data attributes as Input — data-active, data-invalid, and data-success.


<Textarea.Field className="
  border border-black
  data-[active]:border-blue-500
  data-[invalid]:border-red-500
" />

Using data attributes

Textarea.Field reflects focus and validation state through data attributes.


textarea[data-active]  { border-color: #3b82f6; }
textarea[data-invalid] { border-color: #ef4444; }

Root props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value
`defaultValue`	`string`	`''`	Initial value for uncontrolled use
`onChange`	`(value: string) => void`	—	Called on every keystroke
`onFocus`	`() => void`	—	Called on focus
`onBlur`	`() => void`	—	Called on blur
`invalidType`	`string`	`''`	Key into `errorMessage`; consumer-controlled
`errorMessage`	`Record<string, string>`	`{}`	Map of error keys to display strings
`isRequired`	`boolean`	`false`	Shows `*` in label; sets `aria-required`
`id`	`string`	auto-generated	Links label to field

Field props

All standard <textarea> HTML attributes are supported on Textarea.Field (rows, cols, maxLength, etc.).

Field data attributes

Attribute	When present
`data-active`	Field is focused
`data-invalid`	`invalidType` is non-empty