# Autosize

> The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.

Make textareas grow automatically as users type with the autosize plugin, so longer text stays visible without manual resizing.

Source: https://docs.tabler.io/ui/plugins/autosize

---

## Overview

A textarea keeps its height no matter how much text it holds, so long answers end up in a small scrolling box. The [autosize](https://github.com/jackmoore/autosize) plugin grows the field as the user types and shrinks it again when text is removed.

```html
<label class="form-label">Autosize example</label>
<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
```

## Installation

Install autosize with npm:

```shell
npm install autosize
yarn add autosize
pnpm install autosize
bun install autosize
```

Or include it from a CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/autosize/dist/autosize.min.js"></script>
```

The plugin only changes the height of the field, so it needs no CSS of its own.

## Usage

Add `data-bs-toggle="autosize"` to a textarea. Tabler picks it up on page load, so there is nothing else to call.

```html
<label class="form-label">Message</label>
<textarea class="form-control" data-bs-toggle="autosize" rows="1" placeholder="Write a message…"></textarea>
```

Set `rows` to choose the starting height. With `rows="1"` the field starts as a single line and grows from there.

## JavaScript

Tabler initializes every element with `data-bs-toggle="autosize"` on page load. This is the code that runs:

```ts
const autosizeElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-bs-toggle="autosize"]')

if (autosizeElements.length) {
  autosizeElements.forEach(function (element: HTMLElement) {
    if (window.autosize) {
      window.autosize(element)
    }
  })
}
```

_Source: `core/js/src/autosize.ts`_

Call the plugin yourself when you add a textarea later, for example inside a modal or a row added by JavaScript:

```js
autosize(document.getElementById('message'));
```

Autosize measures the field, so a hidden textarea gets the wrong height. Run `autosize.update()` once it becomes visible:

```js
autosize.update(document.getElementById('message'));
```

## Accessibility

- Keep the `label` for the field. A growing textarea is still a normal form control and needs its name.
- Let the field grow instead of setting a fixed `max-height`. Cutting the growth off brings back the scrolling box the plugin is meant to remove.
- Do not remove the resize handle unless the field really grows on its own - without either one, a user cannot see long text.