Skip to content
v0.2.7

Text Input

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

Default Rendered example
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.

Validation States Rendered example
Error: Name field is required
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 Input Rendered example
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 Rendered example
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.

Input with Mask Rendered example
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 Input Rendered example
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 Input Rendered example
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.

Pattern Validation Rendered example
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).

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

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/textinput
Open v0.2.7 API
Tags List Textarea