Library · Forms & CTAs

Textarea

Progressive-enhancement textarea field with built-in validation and accessibility, showing an inline error message when aria-invalid.

Figma: Primitives / Textarea ↗
Live preview — edit theme bottom-right 
---
import Textarea from "../components/primitives/forms/Textarea.astro";
---
<Textarea name="message" label="Your message" rows={4} placeholder="Tell us what's on your mind..." />

Props

NameTypeRequiredDescription
class string — Additional classes to apply to the textarea field container
id string — Unique identifier for the textarea field
name string Yes Name attribute for the textarea field (required for form submission)
label string Yes Label text for the textarea field
data-validation string — Error message to display when validation fails
required boolean — Whether the field is required (default: false)
data-validation-pattern string — Custom validation pattern (regex)
data-validation-fn string — Custom validation function name (must be available on window)
disabled boolean — Whether the field is disabled (default: false)
readonly boolean — Whether the field is readonly (default: false)
autocomplete string — Autocomplete attribute value (default: "on")
rows number — Number of visible text lines
cols number — Number of visible text columns
placeholder string — Placeholder text
[key: string] any — HTML attributes

Example with all props

<Textarea
  class="message-textarea"
  id="enquiry-message"
  name="message"
  label="Your message"
  required
  data-validation="Please enter a message"
  data-validation-pattern=".{20,}"
  data-validation-fn="validateMessage"
  rows={6}
  cols={40}
  placeholder="Tell us about your project…"
  disabled={false}
  readonly={false}
  autocomplete="off"
/>