Back

FormGroup

Basic Usage

We'll never share your email with anyone.

Password must be at least 8 characters.

Tell us a little about yourself (optional).

Validation State

Use State to show visual validation feedback with a colored left border.

Username is available!

invalid

Weak — consider using a longer password.

Form with Reset & Submit

Alpine.js manages form state. Reset clears all fields; Submit validates required fields before proceeding.

Usage

Wrap any control (Input, Select, Textarea…) with FormGroup to get a consistent label + hint + error layout without repeating markup. Error replaces Hint when both are set. State adds a colored border accent.

@forms.FormGroup(forms.FormGroupProps{
    Label:    "Email",
    For:      "email",
    Required: true,
    Hint:     "We'll never share your email.",
    Error:    "", // non-empty replaces Hint with red text
    State:    "valid", // "valid" | "invalid" | "warning" — colored left border
}) {
    @forms.Input(forms.InputProps{Name: "email", Type: "email"})
}