Textarea

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

Preview

Anatomy


import { Textarea } from '@wire-ui/react'
 
<Textarea.Root value={value} onChange={setValue}>
  <Textarea.Label>Message</Textarea.Label>
  <Textarea.Field placeholder="Write something..." rows={4} />
  <Textarea.Error />
</Textarea.Root>

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