FormField
Universal form field wrapper. Composes label, input/textarea, help text, and error display into an accessible unit.
Text Input (required)
Email Input
We'll never share your email with anyone else.
Phone Input
Optional. Include country code for international numbers.
Textarea
Show code
{/* Text input */}
<FormField
name="demo-name"
label="Full Name"
required={true}
placeholder="Jane Smith"
autocomplete="name"
/>
{/* Email input with help text */}
<FormField
name="demo-email"
label="Email Address"
type="email"
required={true}
placeholder="[email protected]"
autocomplete="email"
helpText="We'll never share your email with anyone else."
/>
{/* Phone input */}
<FormField
name="demo-phone"
label="Phone Number"
type="tel"
placeholder="(555) 123-4567"
autocomplete="tel"
helpText="Optional. Include country code for international numbers."
/>
{/* Textarea */}
<FormField
name="demo-message"
label="Message"
type="textarea"
required={true}
placeholder="How can we help?"
rows={5}
/>ListBox
Custom select with ARIA listbox pattern, keyboard navigation, disabled options, and native fallback. Relocated from primitives (D-C8-11).
Default
With Initial Value
Show code
const selectOptions = [
{ value: "design", label: "Design services" },
{ value: "web", label: "Web development" },
{ value: "seo", label: "SEO optimization" },
{ value: "legacy", label: "Legacy support", disabled: true },
{ value: "consulting", label: "Consulting" },
];
{/* Default */}
<ListBox
options={selectOptions}
name="demo-service"
placeholder="Choose a service…"
/>
{/* With initial value */}
<ListBox
options={selectOptions}
name="demo-service-preset"
placeholder="Choose a service…"
initialValue="web"
/>FormError
Error display for individual fields or the form as a whole. Hidden by default; vanilla JS shows and populates when validation fails.
Field-Level Error (static demo)
Form-Level Error (static demo)
Show code
{/* Field-level error — hidden via :empty, visible when content is present */}
<FormError fieldName="demo-field">
Please enter a valid email address.
</FormError>
{/* Form-level error */}
<FormError>
There were errors with your submission. Please review the fields below.
</FormError>FormStatus
Post-submission status display. Shows loading, success, or error states. Vanilla JS drives visibility transitions.
Success State (static demo)
Message sent!
Error State (static demo)
Message sent
Show code
{/* Success state — parent handler sets data-state="open" on success slot */}
<FormStatus
successTitle="Message sent!"
successMessage="Thank you for reaching out. We'll get back to you within 24 hours."
resetLabel="Send another message"
/>
{/* Error state — parent handler sets data-state="open" on error slot */}
<FormStatus errorMessage="Something went wrong. Please try again." />CaptchaField
Cloudflare Turnstile CAPTCHA widget wrapper. In development (no site key), shows a placeholder with bypass token.
Dev-Mode Placeholder
Show code
<form>
<CaptchaField />
</form>Section Components
Full-featured form sections composed from the primitives above. These are the components used on actual pages.
Contact Form Demo
Two-column layout with business contact info and JS-enhanced form.
- Phone: 202-902-6050
- Email: [email protected]
-
13112 Chalkstone Way
Silver Spring, MD 20904
Show code
<LayoutSection contentWidth="wide">
<ContactForm
heading="Contact Form Demo"
description="Two-column layout with business contact info and JS-enhanced form."
/>
</LayoutSection>Show code
<LayoutSection contentWidth="content" verticalPadding="2xl">
<NewsletterSignup
heading="Newsletter Signup Demo"
description="Standalone section with centered layout and newsletter form."
/>
</LayoutSection>NewsletterForm (Compact)
Embeddable form fragment with reduced spacing. Designed for footer, sidebar, or CTA contexts.
Show code
<NewsletterForm compact={true} />