Issue #443: Add TextAreaField form component (#448)

Author: shlokmestry

astro/src/components/TextAreaField.astro

@@ -0,0 +1,69 @@
+---
+export interface Props {
+  /** Unique id for textarea */
+  id: string;
+  /** Label text */
+  label: string;
+  /** Name attribute */
+  name: string;
+  /** Initial value */
+  value?: string;
+  /** Number of rows */
+  rows?: number;
+  /** Optional placeholder text */
+  placeholder?: string;
+  /** Optional help text */
+  helpText?: string;
+  /** Optional error text */
+  errorText?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Required field */
+  required?: boolean;
+  /** Optional class */
+  className?: string;
+}
+
+const {
+  id,
+  label,
+  name,
+  value = "",
+  rows = 4,
+  placeholder,
+  helpText,
+  errorText,
+  disabled,
+  required,
+  className,
+} = Astro.props;
+
+const helpId = helpText ? `${id}-help` : undefined;
+const errorId = errorText ? `${id}-error` : undefined;
+const describedBy = [errorId, helpId].filter(Boolean).join(" ") || undefined;
+---
+
+<div class={className}>
+  <label for={id}>
+    {label}
+    {required && <span aria-hidden="true"> *</span>}
+  </label>
+
+  {errorText && (
+    <p id={errorId} role="alert">
+      {errorText}
+    </p>
+  )}
+
+  {helpText && <p id={helpId}>{helpText}</p>}
+
+  <textarea
+    id={id}
+    name={name}
+    rows={rows}
+    placeholder={placeholder}
+    disabled={disabled}
+    required={required}
+    aria-describedby={describedBy}
+  >{value}</textarea>
+</div>