Textarea Autosize

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Textarea Time Field →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add forms/textarea-autosize

Plain-CSS theme — no build step

npx astrocraft-ui add forms/textarea-autosize --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add forms/textarea-autosize --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/textarea-autosize --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add forms/textarea-autosize --theme tailwind --bridge lumos

Submitting: error summary, autosize, character count

Submit it empty: the summary appears, takes focus, and links to the first field that failed. Fill it in and the button goes aria-busy exactly once. The bio grows as you type and the counter only speaks up near the limit.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`TextareaAutosize.astro`	`textarea-autosize`	`data-size`: `sm` · `md` · `lg` `data-state`: `default` · `error` · `success`	—	—

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/forms/textarea-autosize/TextareaAutosize.astro

---
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"textarea"> & {
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const { size = "md", state = "default", class: className, ...rest } = Astro.props;
---

<textarea
  class={className}
  data-slot="textarea-autosize"
  data-size={size}
  data-state={state}
  {...rest}></textarea>

<script>
  import { onReadyOnce } from "../../_once";

  const NATIVE = CSS.supports("field-sizing", "content");

  function wire(element: HTMLElement) {
    if (NATIVE || !(element instanceof HTMLTextAreaElement)) return;

    const fit = () => {
      element.style.overflowY = "hidden";
      element.style.height = "auto";
      element.style.height = `${element.scrollHeight}px`;
    };

    element.addEventListener("input", fit);
    fit();
  }

  onReadyOnce('[data-slot="textarea-autosize"]', wire);
</script>

src/components/ui/forms/textarea-autosize/index.ts

import TextareaAutosize from "./TextareaAutosize.astro";

export { TextareaAutosize };
export default TextareaAutosize;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/textarea-autosize — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Submitting: error summary, autosize, character count

Attribute surface

Source

What you get