{
  "title": "TextArea",
  "description": "Multi-line text input with label, helper text, and validation states.",
  "url": "/docs/components/text-area",
  "since": "0.1.0",
  "tags": [
    "input",
    "form"
  ],
  "platform": "both",
  "source": "---\ntitle: TextArea\ndescription: Multi-line text input with label, helper text, and validation states.\nsince: 0.1.0\ntags: [input, form]\nplatform: both\ncategory: inputs\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"TextArea\" />\n\n## At a glance\n\n- Multi-line variant of [TextInput](/docs/components/text-input) — vertical instead of horizontal.\n- Forwards every native TextInput prop (`value`, `onChangeText`, `placeholder`, `multiline` is set automatically, `numberOfLines`, …).\n- Pair with [`Field`](/docs/components/field) for label, description, error wiring, and accessible `id` / `aria-*` attributes.\n\n## Preview\n\n<Preview name=\"text-area-basic\" />\n\n## Use with Field\n\nFor labelled text areas with description, error, and a11y wiring, wrap in `<Field>`:\n\n```tsx\nimport { Field, TextArea } from '@nori-ui/core';\n\nexport const Example = () => (\n    <Field label=\"Bio\" description=\"Markdown supported.\">\n        <TextArea placeholder=\"Tell us about yourself\" numberOfLines={4} />\n    </Field>\n);\n```\n\nWith validation error:\n\n```tsx\nimport { Field, TextArea } from '@nori-ui/core';\n\nexport const Example = () => (\n    <Field label=\"Notes\" error=\"Notes can't be empty.\">\n        <TextArea placeholder=\"Add your notes here\" numberOfLines={4} />\n    </Field>\n);\n```\n\nSee [Field](/docs/components/field) for the full API. For custom layouts (e.g., a control + button row), use the [compound API](/docs/components/field#custom-layout-compound-api).\n\n## `rows` and `resize`\n\n`rows` sets the field's minimum height in lines (web maps to the\nnative `rows` attribute; native maps to a computed minHeight from the\nline height). `resize` controls the resize affordance on web —\n`'none'` to lock the size, `'vertical'` to allow vertical drag,\n`'both'` for free resize. Native is always size-locked.\n\n| `resize`              | Web behavior               | Native behavior |\n|-----------------------|----------------------------|-----------------|\n| `none` (default)      | No resize handle           | Fixed height    |\n| `vertical`            | Drag-resize bottom edge    | Fixed height    |\n| `both`                | Drag-resize corner         | Fixed height    |\n\n```tsx\nimport { Field, TextArea } from '@nori-ui/core';\n\nexport const Example = () => (\n    <Field label=\"Bio\">\n        <TextArea rows={4} resize=\"vertical\" />\n    </Field>\n);\n```\n\n## `leading` and `trailing`\n\nInline decorations inside the field — pinned to the top-left\n(`leading`) and top-right (`trailing`) corners so they don't fight the\ntext content as it grows.\n\n```tsx\nimport { Sparkles } from 'lucide-react-native';\nimport { Field, TextArea } from '@nori-ui/core';\n\nexport const Example = () => (\n    <Field label=\"Prompt\">\n        <TextArea leading={<Sparkles size={16} />} numberOfLines={4} />\n    </Field>\n);\n```\n\n## `containerClassName`\n\nTailwind classes for the outer wrapper when used without `<Field>`. Use `className`\non `<Field>` for grid sizing when wrapped.\n\n```tsx\nimport { TextArea } from '@nori-ui/core';\n\nexport const Example = () => (\n    <TextArea containerClassName=\"w-full\" placeholder=\"Description\" rows={6} />\n);\n```\n\n## `disabled`\n\nSet `disabled={true}` to block all input, dim the field, and forward\n`aria-disabled` to assistive technology. The prop can be set directly on\n`TextArea` or inherited from a wrapping `<Field disabled>`.\n\n## Native preview\n\n<ExpoSnack component=\"TextArea\" height={400} />\n\n## Props\n\n<PropsTable component=\"TextArea\" />\n"
}