Forms · astro-ui · Textarea

TextareaJS

Multi-line input with counters, clear button, and resize control.

Textarea mirrors Input’s states and adds multi-line niceties: character counter, optional clear button, auto-grow bounds, and resize control. The core control is zero-JS; the extras are progressive enhancements — a tiny scoped script wires them and they degrade gracefully without it.

← All components

Features

  • Input-matching variants and sizes
  • showCount / counter character displays
  • clearable — clear button appears while typing
  • minRows / maxRows auto-grow
  • resize control (none/vertical/horizontal/both)

Usage

---
import { Textarea, Label } from "astro-ui";
---

<Label for="bio">Bio</Label>
<Textarea id="bio" rows={4} maxlength={280} showCount clearable />

Demos

Basic + counter + clear

0 / 280
<Textarea rows={4} maxlength={280} showCount clearable placeholder="Tell us about yourself" />

Auto-grow

<Textarea minRows={2} maxRows={5} placeholder="Grows with input" />

Resize

<Textarea resize="vertical" rows={2} />

API

Props

PropTypeDefaultDescription
rowsnumber4Visible rows.
maxlength / minlengthnumber—Length bounds.
showCount / counterbooleanfalseCharacter-count readout (aliases).
clearablebooleanfalseClear button, visible with text.
minRows / maxRowsnumber—Auto-grow bounds; sets resize to none.
resize"none" | "vertical" | "horizontal" | "both""vertical"Resize axis.
invalidbooleanfalseValidation state.
size"xs" | "sm" | "md" | "lg" | "xl""md"Scale.
variant"inherit" | "primary" | … | "info""inherit"Border color.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Native textarea semantics; hint/error text via aria-describedby
  • aria-invalid for validation state

FAQ

showCount vs counter?

They are aliases — either renders the count readout ("n / maxlength" when a cap is set). Pick the name that reads best in your markup.

Changelog

Version history mentioning Textarea.

v0.1.0 — 2026-11-11
added
  • Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.
  • Shared --ui-control-* scale (height, inline padding, radius) used by Button, Input, Select, Textarea, and InputGroup so controls align on a row.