# Textarea

_Box Kite 2.2.5 · a markdown copy of https://www.box-kite.dev/textarea/_

Use Textarea component to enter and edit multiline user data.

**Import**

```jsx
import Textarea from '@box-kite/react/components/textarea';
```

**Basic Textarea**

```jsx
<Textarea placeholder="ex. description" />
```

**Disabled Textarea**

```jsx
<Textarea disabled defaultValue="Disabled" />
```

## Textarea props

Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on [/box](https://www.box-kite.dev/box.md) rather than repeated here.

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `name` | `string` | — | What the field submits under, and what a `<label htmlFor>` of your own would point at. |
| `props` | `TextareaTagProps` | — | Attributes for the `<textarea>` itself — an `id`, an `aria-label`, `autoComplete`, `wrap`. |
| `onInput` | `(e: React.ChangeEvent<HTMLTextAreaElement>) => void` | — | Fires on every keystroke. `onChange` is React's alias for the same event. |
| `onChange` | `(e: React.ChangeEvent<HTMLTextAreaElement>) => void` | — | Fires on every keystroke too — React's `onChange` is the DOM's `input`, not its `change`. |
| `placeholder` | `PlaceholderProp` | — | A string is the attribute; an object is `::placeholder` styles. Neither one names the field. |
| `value` | `string` | — | Controlled value. Pair it with `onChange`, or the field cannot be typed into. |
| `defaultValue` | `string` | — | The value it starts with when the field owns its own state. |
| `rows` | `number` | — | How many lines tall it starts. `height` is the Box prop for the size it stays. |
| `cols` | `number` | — | How many characters wide it starts — `width` is the prop to reach for instead. |
| `autoFocus` | `boolean` | — | Focus it on mount. One per page at most — a stolen focus is a lost place in the document. |
| `maxLength` | `number` | — | The most characters the field accepts. The browser both enforces and announces it. |
| `minLength` | `number` | — | The fewest characters that count as valid. Checked when the form is submitted. |
| `readOnly` | `boolean` | — | Editable to nobody, but still focusable, still read out and still submitted. |
| `required` | `boolean` | — | The form will not submit while it is empty, and a screen reader says so. |

## Textarea keyboard

| Key | Result |
| --- | --- |
| `Tab` | Focuses the field, and Tab again leaves it: Tab never inserts a tab character. |
| `Enter` | Inserts a line break rather than submitting the form around it. |

## Textarea accessibility

- Nothing here names the field. A `placeholder` is not a name — it disappears on the first keystroke — so pair it with a `<label htmlFor>` of your own, or pass `props={{ 'aria-label': … }}`.
- `maxLength` is announced as well as enforced, so a limit hit by a screen-reader user is not a silent one.

Swept with axe on every release, in this state: `Textarea`. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet.

## Textarea style tree

Every part the component draws is a node with a name, so a default can be restyled with `Box.components()` instead of a selector — and a variant is a name too.

`textarea`

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_