Combobox

View Original

A combobox is an input widget with an associated popup that enables users to select a value from a collection of possible values.

Goshtoso Component

Go + Templ

Single Select

Industry

Single Select with Search

Make

Multi-Select with Checkboxes

Skills

Multi-Select with Search

Languages

With Images

Share with

Pre-selected Values

Frameworks

Disabled State

Disabled Combobox

Usage Example

// Simple Single-Select
@combobox.Combobox(combobox.Config{
    ID:          "industry",
    Label:       "Industry",
    Placeholder: "Select an industry",
    Options: []combobox.Option{
        {Value: "tech", Label: "Technology"},
        {Value: "health", Label: "Healthcare"},
        {Value: "finance", Label: "Finance"},
    },
})

// Multi-Select with Checkboxes
@combobox.Combobox(combobox.Config{
    ID:             "skills",
    Label:          "Skills",
    Mode:           combobox.ModeMultiple,
    EnableClearAll: true,
    Options: []combobox.Option{
        {Value: "go", Label: "Go"},
        {Value: "js", Label: "JavaScript"},
        {Value: "py", Label: "Python"},
    },
})

// With Search
@combobox.Combobox(combobox.Config{
    ID:           "country",
    Label:        "Country",
    EnableSearch: true,
    Options:      countries,
})

// With Images (Avatars)
@combobox.Combobox(combobox.Config{
    ID:      "user",
    Label:   "Share with",
    Options: users, // Options with Img field
})

// HTMX Lazy Loading
@combobox.Combobox(combobox.Config{
    ID:              "products",
    Label:           "Product",
    HXMTEndpoint:    "/api/products",
    EnableSearch:    true,
    HTMXSearchParam: "q",
})

Checkbox Combobox (new)