Textarea

Multi-line text input with label, description and validation message.

Import

import { TextArea } from '@marbleui/ui'

Props

<TextArea>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
placeholder	`string`	`—`
rows	`number`	`4`
variant	`FieldVariant`	`—`

Also accepts React Aria props (121).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria TextArea · React Aria TextField. Follow the primitive's docs for the full keyboard map.

Usage notes

Multi-line text input with label, description and validation message. For a single line use TextField; for a chat or AI composer use PromptInput.

<TextArea
  label="Feedback"
  description="Markdown is supported."
  placeholder="What could be better?"
  rows={4}
/>

Built on React Aria TextField: use value + onChange (string) or defaultValue, plus isRequired, maxLength, validate and isDisabled.
rows defaults to 4 and the field is vertically resizable. variant matches the other text fields.
Without a visible label, pass aria-label.
Inside a Form, errorMessage shows the validation message.

Example source · show

import { TextArea } from './textarea'

export const styles = {
  Outline: () => (
    <TextArea className="w-80" label="Feedback" placeholder="What could be better?" description="Markdown is supported." />
  ),
  Filled: () => <TextArea className="w-80" variant="filled" label="Notes" rows={3} placeholder="Add a note…" />,
}

Source: packages/ui/src/textarea/textarea.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: react-aria
React Aria: TextField (TextArea)
Base UI: Field.Control