AutosizeTextarea

Form

A labeled textarea that grows with content and scrolls at a defined row limit.

Controlled growing briefPrefilled notesDisabled textarea

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

autosize-textarea.tsx

"use client";

import { AutosizeTextarea } from "@/components/ui/autosize-textarea";
import { useState } from "react";
export default function AutosizeTextareaExample() {
  const [value, setValue] = useState("");
  return (
    <div className="w-full max-w-lg space-y-6">
      <AutosizeTextarea
        label="Project brief"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        minRows={2}
        maxRows={6}
        maxLength={1000}
        placeholder="Describe what you are building. The field grows with your ideas…"
      />
      <p role="status" className="text-end text-xs text-muted-foreground">
        {value.length} / 1,000 characters
      </p>
      <AutosizeTextarea
        label="Team notes"
        minRows={2}
        maxRows={4}
        defaultValue={
          "Keep the first release focused.\nMake the small interactions feel considered.\nLeave room for the next great idea."
        }
      />
      <AutosizeTextarea
        label="Archived notes"
        disabled
        minRows={2}
        defaultValue="This project has been archived."
      />
    </div>
  );
}

Usage

Use for messages, notes, and project briefs where short text can grow. The textarea measures its content on edits, controlled value changes, and width changes. Once maxRows is reached it scrolls internally. Standard textarea props support controlled or uncontrolled use, maxLength, names, and validation. A maxRows lower than minRows is raised to match.

Import

import { AutosizeTextarea } from "@/components/ui/autosize-textarea";

Shipped as editable source in src/components/ui/autosize-textarea.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/autosize-textarea.tsx

"use client";
import {
  useId,
  useLayoutEffect,
  useRef,
  useState,
  type ComponentProps,
} from "react";
import { Label } from "@dashboardpack/core/components/ui/label";
import { cn } from "@dashboardpack/core/lib/utils";
export interface AutosizeTextareaProps
  extends Omit<ComponentProps<"textarea">, "rows"> {
  label: string;
  minRows?: number;
  maxRows?: number;
}
export function AutosizeTextarea({
  label,
  id,
  minRows = 3,
  maxRows = 8,
  className,
  onChange,
  value,
  defaultValue,
  ...props
}: AutosizeTextareaProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const ref = useRef<HTMLTextAreaElement>(null);
  const [revision, setRevision] = useState(0);
  const minimum = Math.max(1, Math.floor(minRows) || 3);
  const maximum = Math.max(minimum, Math.floor(maxRows) || 8);
  useLayoutEffect(() => {
    const element = ref.current;
    if (!element) return;
    const resize = () => {
      const style = getComputedStyle(element);
      const line = parseFloat(style.lineHeight) || 20;
      const padding =
        parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
      const border =
        parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
      element.style.height = "0px";
      element.style.height = `${Math.min(maximum * line + padding + border, Math.max(minimum * line + padding + border, element.scrollHeight + border))}px`;
    };
    resize();
    let width = element.getBoundingClientRect().width;
    const widthObserver = new ResizeObserver(() => {
      const next = element.getBoundingClientRect().width;
      if (next !== width) {
        width = next;
        resize();
      }
    });
    widthObserver.observe(element);
    return () => widthObserver.disconnect();
  }, [value, revision, minimum, maximum]);
  return (
    <div className="space-y-2">
      <Label htmlFor={inputId}>{label}</Label>
      <textarea
        {...props}
        ref={ref}
        id={inputId}
        rows={minimum}
        value={value}
        defaultValue={defaultValue}
        onChange={(event) => {
          setRevision((previous) => previous + 1);
          onChange?.(event);
        }}
        className={cn(
          "flex w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm leading-5 shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
      />
    </div>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

AutosizeTextarea props
Prop	Type / Default	Description
label	`string` Default: required	Visible accessible field label.
minRows	`number` Default: 3	Positive minimum visible row count.
maxRows	`number` Default: 8	Maximum visible rows before internal scrolling.
value / defaultValue	`textarea value` Default: —	Controlled or initial uncontrolled content.
onChange	`ChangeEventHandler<HTMLTextAreaElement>` Default: —	Observe ordinary textarea edits.
disabled	`boolean` Default: false	Disable editing.
className	`string` Default: —	Extend the component container with theme-aware utility classes.

Build with these too

Textarea Field