Textarea

Import

JSX

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

Basic Textarea

JSX

Playground

<Textarea placeholder="ex. description" />

Disabled Textarea

JSX

Playground

<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 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 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

Textarea props

Textarea keyboard

Textarea accessibility

Textarea style tree