# Textarea (React Native)

> Multi-line text with a fixed or auto-growing height and a grapheme-accurate character count.

GramproKit for React Native · Forms · Beta · Source: https://kit.gramproindia.com/native/docs/textarea

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/textarea). The example's source:

```tsx
import { Textarea } from "@/component-lib/textarea";
import { Section } from "./layout"; // Section and Row: page layout for the demo

export function TextareaDemo() {
  return (
    <Section title="Textarea">
      <Textarea label="Notes" placeholder="Anything we should know?" description="Fixed at 3 rows." />
      <Textarea
        label="Message"
        autoResize
        minRows={2}
        maxRows={6}
        showCount
        maxLength={140}
        placeholder="Grows from 2 to 6 rows, then scrolls"
        required
      />
      <Textarea label="Feedback" defaultValue="Too short" error="Write at least 20 characters." />
      <Textarea label="Read only" readOnly defaultValue={"Line one\nLine two"} rows={2} />
      <Textarea label="Disabled" disabled rows={2} />
    </Section>
  );
}
```

## Install

```bash
npx @grampro/kit@native add Textarea
```

## Usage

```tsx
import { Textarea } from "@/component-lib/textarea";

<Textarea label="Message" autoResize minRows={2} maxRows={6} maxLength={140} showCount />
```

## Props

### TextareaProps

| Prop | Type | Description |
|---|---|---|
| `value` | `string` |   |
| `defaultValue` | `string` |   |
| `onValueChange` | `(value: string) => void` | The new text on every change. `onChangeText` fires as well. |
| `label` | `ReactNode` | The field's name, shown above it. |
| `description` | `ReactNode` | A hint under the field, read as the field's hint. |
| `error` | `ReactNode` | Message below the field; also marks it invalid. |
| `size` | `FieldSize` | Default `md`. |
| `rows` | `number` | Height in rows when not auto-resizing. Default 3. |
| `autoResize` | `boolean` | Grow and shrink with the text, between `minRows` and `maxRows`. Default false. |
| `minRows` | `number` | Smallest height in rows. Default `rows`, or 3. |
| `maxRows` | `number` | Largest height in rows before the text scrolls. No limit by default. |
| `showCount` | `boolean` | A character counter; shows `count / maxLength` when `maxLength` is set. |
| `disabled` | `boolean` |   |
| `readOnly` | `boolean` |   |
| `required` | `boolean` | Marks the label with an asterisk. Native has no form validation of its own. |
| `style` | `Styleable<ViewStyle>` |   |
| `styles` | `Partial<{ root: Styleable<ViewStyle>; label: Styleable<TextStyle>; textarea: Styleable<…` |   |
| `localeText` | `Partial<TextareaLocaleText>` |   |

Also accepts the props of `Omit<TextInputProps, "value" | "defaultValue" | "style" | "editable" | "multiline">`.

## Native and web

- There is no `resize` handle on touch; use `rows` or `autoResize`.
- Web version: [Textarea on the web](https://kit.gramproindia.com/textarea).