Text Input

View Original

Text inputs allow users to enter and edit text. Supports various types including password with toggle, search with icon, validation states, and input masks.

Goshtoso Component

Go + Templ

Default Text Input

Name

Validation States

Name Error: Name field is required

Name

Password Input

Password

Search Input

Input with Mask

Phone

Disabled Input

Disabled

Readonly Input

Readonly

Pattern Validation

Cluster ID Must match: t[a-z0-9]{6}

MaxLength

Code (max 7 chars)

Usage Example

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

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

// Input with error state
@textinput.TextInput(textinput.Config{
    ID:         "email-error",
    Name:       "email",
    Label:      "Email",
    State:      textinput.StateError,
    HelperText: "Error: Email is required",
})

// Input with success state
@textinput.TextInput(textinput.Config{
    ID:         "name-success",
    Name:       "name",
    Label:      "Name",
    State:      textinput.StateSuccess,
    Value:      "John",
})

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

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

Tags List Textarea