> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TextareaField

> Capture multiline text with a label and validation feedback

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`TextareaField` configures React Native `TextInput` for multiline content.

<LocalUiPlayground component="textarea-field" title="Interactive TextareaField example" />

## Usage

```tsx theme={null}
import { useState } from 'react';

import { TextareaField } from '@amisi-mobile-starter/ui';

export const BioField = () => {
  const [bio, setBio] = useState('');

  return (
    <TextareaField
      label="Bio"
      value={bio}
      onChangeText={setBio}
      numberOfLines={6}
      helperText="Tell people what you work on."
    />
  );
};
```

## Props

| Prop                | Type                                  | Default     | Description                                                              |
| ------------------- | ------------------------------------- | ----------- | ------------------------------------------------------------------------ |
| `label`             | `string`                              | `undefined` | Field label.                                                             |
| `error`             | `string`                              | `undefined` | Error shown instead of helper text.                                      |
| `helperText`        | `string`                              | `undefined` | Supporting text shown when there is no error.                            |
| `containerStyle`    | `StyleProp<ViewStyle>`                | `undefined` | Style for the outer wrapper.                                             |
| `numberOfLines`     | `number`                              | `4`         | Native line count and basis for the `20 * numberOfLines` minimum height. |
| `textAlignVertical` | `TextInputProps['textAlignVertical']` | `'top'`     | Native vertical text alignment.                                          |
| `multiline`         | `boolean`                             | `true`      | Set internally before inherited props are spread.                        |

All React Native `TextInputProps` are accepted. Explicit inherited props are spread last, so `multiline` and the generated `style` can be overridden.