Issue #441: Add TextField form component (#450)

Author: shlokmestry

astro/src/components/TextField.astro

@@ -0,0 +1,69 @@
+export interface Props {
+  /** Unique id for input */
+  id: string;
+  /** Label text */
+  label: string;
+  /** Name attribute */
+  name: string;
+  /** Input value */
+  value?: string;
+  /** Input type (text, email, password, etc.) */
+  type?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Help text below input */
+  helpText?: string;
+  /** Error text */
+  errorText?: string;
+  /** Required field */
+  required?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Optional class */
+  className?: string;
+}
+
+const {
+  id,
+  label,
+  name,
+  value = "",
+  type = "text",
+  placeholder,
+  helpText,
+  errorText,
+  required,
+  disabled,
+  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>}
+
+  <input
+    id={id}
+    name={name}
+    type={type}
+    value={value}
+    placeholder={placeholder}
+    required={required}
+    disabled={disabled}
+    aria-describedby={describedBy}
+  />
+</div>