# TextArea (/docs/products/dash-dots/reference/components/text-area)

For one line, use an `Input`.

**Children:** Nothing

## Example

![The TextArea component](/assets/images/dash-dots/components/text-area.webp)

```xml title="view.dml"
<TextArea label="Note" placeholder="What is this payment for?" rows="3" value="{{ note }}" onChange="setNote" />
```

```ts title="controller.ts"
export default definePage({
  initialState: { note: '' },
  mutations: {
    setNote: (_state, event: ValueEvent) => ({ note: event.detail.value }),
  },
});
```

## Props

| Prop          | Type      | What it is                                                 |
| ------------- | --------- | ---------------------------------------------------------- |
| `value`       | `string`  |                                                            |
| `placeholder` | `string`  |                                                            |
| `label`       | `string`  |                                                            |
| `hint`        | `string`  | Help shown under the field, which `error` replaces.        |
| `error`       | `string`  | Shown under the field in red, in place of `hint`.          |
| `rows`        | `number`  | The lines of text it shows before scrolling. Default: `3`. |
| `maxLength`   | `number`  |                                                            |
| `disabled`    | `boolean` | Dims it, and the person can't use it.                      |

## Events

| Event      | Sends                   | Notes |
| ---------- | ----------------------- | ----- |
| `onChange` | `{ value }` in `detail` |       |