---
title: Autosize
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
description: Make textareas grow automatically as users type with autosize, so longer text stays visible without manual resizing.
related: [/ui/forms/elements]
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Overview

A textarea keeps its height no matter how much text it holds, so long answers end up in a small scrolling box. Autosize grows the field as the user types and shrinks it again when text is removed.

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

## Installation

Autosize is part of `tabler.js` and has no dependency, so there is nothing extra to install or load. It only sets 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.

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

Set `rows` to choose the starting height. With `rows="1"` the field starts as a single line and grows from there. Set a `max-height` to cap the growth; past it the field scrolls again.

<Example column vertical>
<label class="form-label">Notes, at most four lines</label> <textarea class="form-control" data-bs-toggle="autosize" rows="2" style="max-height: 6.5rem" placeholder="Keep typing to see the field stop growing…"></textarea>
</Example>

## JavaScript

Tabler ships an `Autosize` component that works like the Bootstrap components: it is created once per element and stored on it. On page load Tabler creates one for every element with `data-bs-toggle="autosize"`. It sets the height from the content on every `input` event and again when the field changes width. This is the code that runs:

<CodeDocs name="autosize-init" file="core/js/src/autosize.ts" />

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

```js
const autosize = new tabler.Autosize(document.getElementById('message'));
```

`tabler.Autosize.getOrCreateInstance(element)` returns the existing component or creates a new one, so it is safe to call more than once for the same field.

Autosize measures the field, so a hidden textarea is skipped. Call `update()` once it becomes visible, or after you set its value from code:

```js
tabler.Autosize.getOrCreateInstance(document.getElementById('message')).update();
```

Call `dispose()` to stop it and put the inline style back the way it was:

```js
tabler.Autosize.getInstance(document.getElementById('message'))?.dispose();
```

| Method | Description |
| --- | --- |
| `update()` | Recalculates the height, for example after the textarea becomes visible or its value changes from code. |
| `dispose()` | Stops listening, restores the inline style and removes the component from the element. |
| `getInstance(element)` | Static. Returns the component for the element, or `null`. |
| `getOrCreateInstance(element)` | Static. Returns the component for the element and creates it when needed. |

Every change of height fires `resized.bs.autosize` on the textarea, for example to scroll a chat window to the bottom:

```js
document.getElementById('message').addEventListener('resized.bs.autosize', () => {
  thread.scrollTop = thread.scrollHeight;
});
```

## Accessibility

- Keep the `label` for the field. A growing textarea is still a normal form control and needs its name.
- Let the field grow freely when you can. A `max-height` brings back a scrolling box, so keep it generous, for example the height of the visible chat window.
- Autosize hides the resize handle, because the field grows on its own. With a `max-height` the field scrolls past the cap, so long text stays reachable.