Input

Labelled text fields with built-in error and helper states.

Default

Component
@input.Input(input.Props{
    Name:        "email",
    Type:        input.TypeEmail,
    Label:       "Email address",
    Placeholder: "you@example.com",
    Required:    true,
})

With Error

Please enter a valid email address.

Component
@input.Input(input.Props{
    Name:  "email",
    Label: "Email address",
    Value: "not-an-email",
    Error: "Please enter a valid email address.",
})

Search Input

Component
@input.SearchInput(input.Props{
    Name:        "q",
    Placeholder: "Search users…",
    Attrs: templ.Attributes{
        "hx-get":     "/users",
        "hx-target":  "#user-list",
        "hx-trigger": "input changed delay:300ms",
        "hx-push-url": "true",
    },
})