Components / Forms

TextArea

TextArea is the multi-line counterpart to Input. It shares the same Field-context wiring and adds a rows prop plus a vertical resize handle.

Loading playground…

What it is

A bordered <textarea> that forwards its ref. The Field-context behaviour matches Input — field id, aria-describedby, invalid and disabled state, all read from context. TextArea is resizable vertically by default; the rows prop sets the initial height.

Install

TextArea is exported from usemotif. No separate install.

example.tsx

import { TextArea } from 'usemotif';

API

TextArea

stable

const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>

rowsnumber= 3

Initial visible row count. The control stays resizable vertically past this height.

invalidboolean

Marks the control invalid. Falls back to the Field context value when omitted.

styleCSSProperties

Inline style merged on top of the bordered-surface defaults.

…TextareaHTMLAttributesOmit<TextareaHTMLAttributes, "size">

Every standard textarea attribute except `size`. `placeholder`, `value`, `onChange`, `maxLength`, and the rest pass through.

Accessibility

TextArea's accessibility contract is Input's: inside a Field it claims the field id, names its help and error text, and mirrors the invalid and required state. The same standalone caveat applies — outside a Field, wire id and aria-describedby yourself.

Examples

Inside a Field:

example.tsx

<Field>
<Label>Bio</Label>
<TextArea rows={4} placeholder="Tell us about yourself" />
<FieldHelp>Up to 200 characters.</FieldHelp>
</Field>

Controlled standalone:

example.tsx

<TextArea
value={note}
onChange={(e) => setNote(e.target.value)}
rows={6}
/>