## Usage

The `<TextAreaInput/>` component is most commonly used in a form context, where you would nest it inside a [Field](/packages/field/) to get a label, validation message and spacing, out of the box.

## Size

The text area supports the following sizes, `small` and `medium` (default). Prefer using size consistently with other form controls (a button e.g.) that support the same sizes.

```tsx live
<Flex flexDirection="column" gap="small">
  <TextAreaInput placeholder="small" size="small" rows={2} />
  <TextAreaInput placeholder="medium" size="medium" rows={2} />
</Flex>
```

## Rows

The `rows` props defines the number of rows visible in the text area. The default size is 4 rows with a maximum of 8 rows.

```tsx live
<TextAreaInput placeholder="2 rows" rows={2} />
```

## Disabled

Use the `disabled` prop when the user shouldn't be able to manipulate the value of the input.

```tsx live
<TextAreaInput placeholder="Disabled" disabled />
```

## Invalid

Use the `invalid` prop to communicate that validation has failed for this particular text input.

```tsx live
<TextAreaInput placeholder="Invalid" invalid />
```

## Counter

The `<TextAreaInput/>` component supports a character counter, it's possible to define `maxLimit` and a `minLimit`. When those props are defined an error will be displayed in the bottom of the input if the user input is below or above the limits.

### maxLimit

When the `maxLimit` is defined a counter will be displayed in the bottom right of the text area. When the character limit is reached the counter will turn on critical color.

```tsx live
<TextAreaInput maxLimit={100} />
```

### minLimit

When the `minLimit` is defined no counter will be displayed but a message will be displayed in the bottom of the text area in case the user input is below the limit.

```tsx live
<TextAreaInput minLimit={100} />
```

### limitMessage

When the `maxLimit` or `minLimit` is defined the component will display an error message in the bottom of the text area in case the user input is below or above the limits and clicks outside the input.

By default the component messages will be:

- `maxLimit`: You have exceeded the character limit
- `minLimit`: You need to enter at least `{minLimit}` characters

Those messages can be customised via the prop `limitMessage` which accepts an object with the following keys:

- `overLimit` - Message displayed when the user input is above the `maxLimit`
- `underLimit` - Message displayed when the user input is below the `minLimit`

```jsx
<TextAreaInput
  maxLimit={10}
  minLimit={5}
  limitMessage={{
    overLimit: 'Max limit reached',
    underLimit: 'Minimum limit not reached',
  }}
/>
```

## Other native props

The `<TextAreaInput />` also supports the following native `InputHTMLAttributes` (see [props](/packages/text-input/props) for a full list):

- `onBlur`
- `onFocus`
- `onChange`
- `placeholder`
- `value`

TextAreaInput

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources