TextArea
Multiline input that can grow with its content.
Installation
npx axiom add text-areapnpm dlx axiom add text-areayarn dlx axiom add text-areabun x axiom add text-areaAlso copies input: TextArea uses its tokens, field layout and use-input.ts.
Usage
import { TextArea } from "@/components/ui/text-area";
<TextArea label="Message" autoGrow value={message} onChangeText={setMessage} />;Props
TextArea accepts the same props as Input (label, helper, error, disabled, required, 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. |
showCount | boolean | false | Shows length / maxLength under the field, right-aligned. Turns red at the limit. |
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.
<TextArea
autoGrow
minRows={1}
maxRows={5}
placeholder="Message"
value={draft}
onChangeText={setDraft}
/>Feedback with a character limit
showCount tells the user how much room is left before they hit the limit.
<TextArea
label="What happened?"
maxLength={200}
showCount
value={text}
onChangeText={setText}
/>Full-screen note
variant="plain" removes the field chrome: the screen itself is the editor.
<TextArea
variant="plain"
autoFocus
value={body}
onChangeText={setBody}
containerStyle={{ flex: 1 }}
/>