Autosize

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

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 plugin grows the field as the user types and shrinks it again when text is removed.

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

Installation

Install autosize with npm:

npm install autosize

yarn add autosize

pnpm install autosize

bun install autosize

Or include it from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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.

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

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

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

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

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

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.

Related