Textarea

<Textarea label="Message" hint="Markdown is supported." placeholder="Write something…" />

Add

npx @ava-ui/apogee add textarea

Pulls in Field (label / hint / error scaffold).

Usage

---
import Textarea from '@/components/apogee/Textarea/Textarea.astro'

<JsNote fallback="The box keeps its rows height and the resize handle.">
  `resize="auto"` grows the box to its content on input in browsers without `field-sizing: content` (Chromium has it natively).
</JsNote>
---
<Textarea label="Message" />

Anatomy

Textarea renders a Field (label + hint/error scaffold) around a native <textarea>:

• Field — label (with required asterisk), the control, then hint or error.
• Textarea — the native <textarea>, sized by size and rows.

API

@composable — exposed to Content Editors in AVA. Any other native <textarea> attribute (e.g. placeholder, disabled, maxlength, name) passes through.

Sizes

Every size:

<Textarea label="Small" size="small" placeholder="Small" />
<Textarea label="Medium" placeholder="Medium" />
<Textarea label="Large" size="large" placeholder="Large" />

Resize

Every resize value:

<Textarea label="None" resize="none" rows={2} />
<Textarea label="Vertical" resize="vertical" rows={2} />
<Textarea label="Auto" resize="auto" rows={2} />

States

<Textarea label="Disabled" disabled placeholder="Disabled" />
<Textarea label="Bio" error="Bio is required." />
<Textarea label="Bio" required hint="Tell us about yourself." />

• Hover — border unchanged; no hover-specific style.
• Focus — visible focus-visible ring (--border-primary).
• Disabled — dimmed, not focusable, native disabled.
• Invalid (error set) — --background-critical border, aria-invalid="true", hint text replaced by the error message with role="alert".

Examples

More rows for longer content:

<Textarea label="Notes" rows={8} />

Accessibility

• Real <label for> / <textarea id> pairing via Field.
• aria-describedby points to the hint or error paragraph; aria-invalid is set when error is present.
• The error paragraph has role="alert" so it’s announced.
• Focus ring is always visible on keyboard focus.

Tokens

Do / Don’t

• Do pair every Textarea with a label — placeholder text is not a label.
• Do use hint for format guidance, error for validation failures — not both at once (error takes over).
• Don’t disable a field without explaining why elsewhere on the page.
• Don’t rely on rows alone for very long content — consider letting it grow or linking to a fuller editor.

Content

• Label is a short noun phrase, sentence case, no colon.
• Error copy states what’s wrong and how to fix it (“Bio is required.”).
• Hint text is one line, no ending period unless it’s a full sentence.