TextArea

At a glance

• Multi-line variant of TextInput — vertical instead of horizontal.
• Forwards every native TextInput prop (value, onChangeText, placeholder, multiline is set automatically, numberOfLines, …).
• Pair with Field for label, description, error wiring, and accessible id / aria-* attributes.

Preview

Use with Field

For labelled text areas with description, error, and a11y wiring, wrap in <Field>:

import { Field, TextArea } from '@nori-ui/core';
 
export const Example = () => (
    <Field label="Bio" description="Markdown supported.">
        <TextArea placeholder="Tell us about yourself" numberOfLines={4} />
    </Field>
);

With validation error:

import { Field, TextArea } from '@nori-ui/core';
 
export const Example = () => (
    <Field label="Notes" error="Notes can't be empty.">
        <TextArea placeholder="Add your notes here" numberOfLines={4} />
    </Field>
);

See Field for the full API. For custom layouts (e.g., a control + button row), use the compound API.

rows and resize

rows sets the field's minimum height in lines (web maps to the native rows attribute; native maps to a computed minHeight from the line height). resize controls the resize affordance on web — 'none' to lock the size, 'vertical' to allow vertical drag, 'both' for free resize. Native is always size-locked.

import { Field, TextArea } from '@nori-ui/core';
 
export const Example = () => (
    <Field label="Bio">
        <TextArea rows={4} resize="vertical" />
    </Field>
);

leading and trailing

Inline decorations inside the field — pinned to the top-left (leading) and top-right (trailing) corners so they don't fight the text content as it grows.

import { Sparkles } from 'lucide-react-native';
import { Field, TextArea } from '@nori-ui/core';
 
export const Example = () => (
    <Field label="Prompt">
        <TextArea leading={<Sparkles size={16} />} numberOfLines={4} />
    </Field>
);

containerClassName

Tailwind classes for the outer wrapper when used without <Field>. Use className on <Field> for grid sizing when wrapped.

import { TextArea } from '@nori-ui/core';
 
export const Example = () => (
    <TextArea containerClassName="w-full" placeholder="Description" rows={6} />
);

disabled

Set disabled={true} to block all input, dim the field, and forward aria-disabled to assistive technology. The prop can be set directly on TextArea or inherited from a wrapping <Field disabled>.

Native preview

Props