Textarea autosize

#Example

<textarea class="textarea max-w-md max-h-64" rows="2" data-m-autosize aria-label="Message">Write as much as you like: this box grows line by line, then scrolls once it reaches its maximum height.</textarea>

#JavaScript API

#Classes

1 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.input,
.select,
.textarea,
.file-input,
.color-input,
.otp-input,
.otp-field {
  --tone: var(--field-tone, var(--ring));
}

.input:read-only:not(:disabled), .textarea:read-only:not(:disabled) {
  background-color: var(--surface-2);
  box-shadow: none;
}

#Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Textarea autosize: start from the base class, then add modifiers -->
<textarea class="textarea max-w-md max-h-64" rows="2" data-m-autosize aria-label="Message">Write as much as you like: this box grows line by line, then scrolls once it reaches its maximum height.</textarea>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components