Text Input

Text inputs let users enter and edit text. Supports password toggle, search icon, validation states, masks, patterns, and length limits.

Name

Usage Example

@textinput.TextInput(textinput.Config{
    ID:          "name",
    Name:        "name",
    Label:       "Name",
    Placeholder: "Enter your name",
})

Validation States

Set State to textinput.StateError or textinput.StateSuccess; the label, border, and HelperText recolor to match.

Name Error: Name field is required

Name

Validation States

@textinput.TextInput(textinput.Config{
    ID: "email-error", Name: "email", Label: "Email",
    State: textinput.StateError, HelperText: "Error: Email is required",
})
@textinput.TextInput(textinput.Config{
    ID: "name-success", Name: "name", Label: "Name",
    State: textinput.StateSuccess, Value: "John",
})

Password Input

Type: textinput.TypePassword renders a built-in show/hide toggle button.

Password

Password Input

@textinput.TextInput(textinput.Config{
    ID:           "password",
    Name:         "password",
    Label:        "Password",
    Type:         textinput.TypePassword,
    Placeholder:  "Enter your password",
    Autocomplete: "current-password",
})

Search Input

Type: textinput.TypeSearch adds a leading search icon.

Search Input

@textinput.TextInput(textinput.Config{
    Name:        "search",
    Type:        textinput.TypeSearch,
    Placeholder: "Search",
})

Input with Mask

Mask applies an Alpine.js x-mask pattern as the user types.

Phone

Input with Mask

@textinput.TextInput(textinput.Config{
    ID:           "phone",
    Name:         "phone",
    Label:        "Phone",
    Mask:         "(999) 999-9999",
    Placeholder:  "(999) 999-9999",
    Autocomplete: "tel-national",
})

Disabled Input

Disabled: true blocks editing and dims the field.

Disabled

Disabled Input

@textinput.TextInput(textinput.Config{
    ID: "disabled", Name: "disabled", Label: "Disabled",
    Placeholder: "Cannot edit", Disabled: true,
})

Readonly Input

Readonly: true keeps the value submittable but non-editable.

Readonly

Readonly Input

@textinput.TextInput(textinput.Config{
    ID: "readonly", Name: "readonly", Label: "Readonly",
    Value: "Cannot change this", Readonly: true,
})

Pattern Validation

Pattern sets the HTML pattern attribute; pair it with input events when you want live native-validity feedback.

Cluster ID

Pattern Validation

@textinput.TextInput(textinput.Config{
    ID: "cluster", Name: "cluster_id", Label: "Cluster ID",
    Placeholder: "tabc123",
    Pattern:     "t[a-z0-9]{6}",
    InputAttrs: templ.Attributes{
        "x-on:input": "touched = true; valid = $event.target.checkValidity()",
        "x-on:blur":  "touched = true; valid = $event.target.checkValidity()",
        "x-bind:class": "touched ? (valid ? 'border-success' : 'border-danger') : ''",
        "x-bind:aria-invalid": "touched && !valid ? 'true' : 'false'",
        "aria-describedby": "patternInput-feedback",
    },
})

MaxLength

MaxLength caps the number of characters (0 = no limit).

Code (max 7 chars)

MaxLength

@textinput.TextInput(textinput.Config{
    ID: "code", Name: "code", Label: "Code (max 7 chars)",
    Placeholder: "tabc123", MaxLength: 7,
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id for the input (and the label's for target).
`Name`	`string`	`""`	Form field name.
`Label`	`string`	`""`	Label text shown above the input.
`Placeholder`	`string`	`""`	Placeholder text when empty.
`Value`	`string`	`""`	Current input value.
`Type`	`InputType`	`TypeText`	Input type: "text", "password", "search", "email", "tel", "url", "number".
`State`	`State`	`StateDefault`	Validation state: "" (default), "error", "success".
`HelperText`	`string`	`""`	Text below the input, recolored by State.
`Disabled`	`bool`	`false`	Disables the input.
`Required`	`bool`	`false`	Marks the input as required.
`Readonly`	`bool`	`false`	Non-editable but still submittable.
`Autocomplete`	`string`	`""`	HTML autocomplete attribute value.
`Mask`	`string`	`""`	Alpine.js x-mask pattern (e.g. "(999) 999-9999").
`Pattern`	`string`	`""`	HTML pattern attribute for regex validation.
`MaxLength`	`int`	`0`	Character limit (0 = no limit).
`InputAttrs`	`templ.Attributes`	`nil`	Arbitrary attributes on the <input> (e.g. hx-post, hx-indicator).
`RootClass`	`string`	`""`	Extra classes on the container.

Tags List Textarea