TextArea

Review

Post

Your review

Great little café. The flat white was excellent and the staff remembered my name on the second visit. It gets loud around noon

Be specific, it helps others.128 / 500

Owner reply

No reply yet.

Installation

npx axiom add text-area

pnpm dlx axiom add text-area

yarn dlx axiom add text-area

bun x axiom add text-area

Also copies input: TextArea uses its tokens, its Field parts and use-input.ts.

Usage

import { Field } from "@/components/ui/input";
import { TextArea } from "@/components/ui/text-area";

<Field>
	<Field.Label>Message</Field.Label>
	<TextArea autoGrow value={message} onChangeText={setMessage} />
</Field>;

Like Input, TextArea is the control alone. The label, description, error and a character count are things you write around it, in a Field.

Props

TextArea accepts the same props as Input (invalid, disabled, containerStyle, ref, and every TextInput prop) except prefix, suffix and size, plus:

Prop	Type	Default	Description
`autoGrow`	`boolean`	`false`	The field gets taller as lines are added, between `minRows` and `maxRows`. Past `maxRows` it scrolls.
`minRows`	`number`	`3`	Height when empty, in lines of body text. Lines get taller with larger system text, up to 1.5×.
`maxRows`	`number`	`8`	Height limit with `autoGrow`. Keeps the field from pushing the rest of the screen off.
`maxLength`	`number`	—	Hard character limit, from `TextInput`.
`variant`	`'outline' \| 'filled' \| 'plain'`	`'outline'`	`plain` has no border or padding, for full-screen editors. It grows to fill its container.

Use cases

Chat composer

autoGrow with a low maxRows: one line at rest, a few lines while typing, then scroll.

Are we still on for Friday?

Yes! 7pm works.

Perfect. I’ll book the table near the window, and bring the photos from last time

<TextArea
	autoGrow
	minRows={1}
	maxRows={5}
	placeholder="Message"
	value={draft}
	onChangeText={setDraft}
/>

Feedback with a character limit

A count next to the description tells the user how much room is left. It’s a Text you write, so its place and its wording are yours.

Report a problem

BugIdeaOther

What happened?

The export button does nothing on the Q3 report when I’m offline, and then it crashes after reconnecting. Steps: open the report, turn on airplane…

Keep it under 200 characters.200 / 200

<Field>
	<Field.Label>What happened?</Field.Label>
	<TextArea maxLength={200} value={text} onChangeText={setText} />
	<View style={{ flexDirection: "row", gap: 12 }}>
		<Field.Description style={{ flex: 1 }}>
			Steps help us reproduce it.
		</Field.Description>
		<Text variant="footnote" color={text.length >= 200 ? "error" : "muted"}>
			{text.length} / 200
		</Text>
	</View>
</Field>

Full-screen note

variant="plain" removes the field chrome: the screen itself is the editor.

Notes

Done

14 September 2026 at 09:41

Trip ideas

Porto in October: the bookshop, a port tasting, the Ribeira at sunset.

Lisbon after, by train

<TextArea
	variant="plain"
	autoFocus
	value={body}
	onChangeText={setBody}
	accessibilityLabel="Note"
	containerStyle={{ flex: 1 }}
/>

Input

On this page