FormField

A lightweight, semantic wrapper for organizing related form inputs, combining accessible fieldsets with fully customizable visual titles for clean and well-structured forms.

pnpm dlx hybrid-astro-ui@latest add form-field

npx hybrid-astro-ui@latest add form-field

yarn dlx hybrid-astro-ui@latest add form-field

bunx hybrid-astro-ui@latest add form-field

Usage

What is FormField?

FormField is a small utility component that wraps a group of related form inputs inside a semantic HTML <fieldset>. It automatically adds an accessible <legend> (visually hidden using sr-only) so screen readers can understand the purpose of that section, without affecting your UI layout.

This approach improves:

• Form accessibility (a11y)

• Semantic structure for assistive technologies

• Keyboard navigation

• Modular form organization in complex interfaces

Use FormField whenever you need to group inputs that belong to the same logical section of a form, such as Login Information, Personal Details, Shipping Address, or Security Verification.

What is FieldTitle?

FieldTitle is an optional visual title component meant to accompany FormField. Because the <legend> is hidden for accessibility reasons, FieldTitle provides a visible title that users can see in the UI.

This separation gives you:

• A clean, fully stylable visible title

• A semantic legend for screen readers

• Full control over layout and spacing

Fully example

---
import { Card, CardContent } from "@/src/components/hybrid-astro-ui/card"
import { FormField, FieldTitle } from "@/src/components/hybrid-astro-ui/form-field"
---
<Card class="w-full max-w-90">
    <CardContent>
        <form class="flex flex-col gap-2">
            <FormField legend="Login Information">
                <FieldTitle title="Login Information"  />
                <Input placeholder="username" required />
                <Input type="email" placeholder="email" required />
            </FormField>

            <FormField legend="Security Verification">
                <FieldTitle title="Security Verification"  />
                <Input type="password" placeholder="Password" required />
                <Input type="text" placeholder="2FA Code (optional)" />
            </FormField>

            <Button aria-label="Submit login form" class="w-full">
                Submit
            </Button>
        </form>
    </CardContent>
</Card>