Combobox

Client-mode comboboxes toggle entirely in the browser (no HTTP on open/select); server-mode keeps an HTMX lazy/search path for options that can't be pre-rendered.

Default Rendered example

Industry (client mode)

Usage Example

// Client mode: options are pre-rendered, toggling happens in the browser.
var IndustryCfg = combobox.Config{
    ID: "industry", Name: "industry", Label: "Industry",
    Mode:   combobox.ModeSingle,
    Source: combobox.Source{Static: industryOptions},
}
@combobox.Combobox(IndustryCfg, combobox.State{Options: IndustryCfg.Source.Static})

Client Multi-Select

Mode: combobox.ModeMultiple with EnableClearAll — still fully client-side.

Client Multi-Select

var SkillsCfg = combobox.Config{
    ID: "skills", Name: "skills", Mode: combobox.ModeMultiple, EnableClearAll: true,
    Source: combobox.Source{Static: skillOptions},
}
@combobox.Combobox(SkillsCfg, combobox.State{Options: SkillsCfg.Source.Static})

Selected and Disabled Options

Set Config.Selected for first-paint values. Disabled options stay visible but cannot be selected.

Selected and Disabled Options Rendered example

Region

Selected and Disabled Options

var RegionsCfg = combobox.Config{
    ID: "region", Name: "region", Label: "Region",
    Selected: []string{"us-east-1"},
    Source: combobox.Source{Static: []combobox.Option{
        {Value: "us-east-1", Label: "US East"},
        {Value: "legacy", Label: "Legacy region", Disabled: true},
    }},
}
@combobox.Combobox(RegionsCfg, RegionsCfg.InitialState())

Server Mode (lazy search)

Use a non-empty LazyEndpoint to select server mode, then set Toggle/Options/Clear endpoints for HTMX selection, search, and clearing. The current LazyEndpoint value is a mode marker; OptionsEndpoint is the URL actually requested.

Server Mode (lazy search) Rendered example

Users (server mode, lazy)

Server Mode (lazy search)

var UsersCfg = combobox.Config{
    ID: "users", Name: "users", Mode: combobox.ModeMultiple,
    EnableSearch: true, EnableClearAll: true,
    ToggleEndpoint:  "/api/.../toggle",
    OptionsEndpoint: "/api/.../options",
    ClearEndpoint:   "/api/.../clear",
    Source: combobox.Source{LazyEndpoint: "/api/.../options"},
}
@combobox.Combobox(UsersCfg, combobox.State{})

Cascading Server Filters

DependsOn adds other fields to combobox HTMX requests. Add an hx-get on the parent field when changing it should immediately refresh the dependent options.

Cascading Server Filters Rendered example

Provider

Cluster

Cascading Server Filters

selectedProvider := "aws"
var ClusterCfg = combobox.Config{
    ID: "cluster", Name: "cluster", Mode: combobox.ModeSingle,
    EnableSearch: true,
    DependsOn: []string{"provider"},
    ToggleEndpoint:  "/api/.../clusters/toggle",
    OptionsEndpoint: "/api/.../clusters/options",
    ClearEndpoint:   "/api/.../clusters/clear",
    Source: combobox.Source{LazyEndpoint: "/api/.../clusters/options"},
}

// OptionsProvider receives search and deps["provider"] on the server.
clustersProvider := func(ctx context.Context, search string, deps map[string]string) ([]combobox.Option, error) {
    return clustersForProvider(deps["provider"], search)
}

<select
    name="provider"
    hx-get={ ClusterCfg.OptionsEndpoint }
    hx-trigger="change"
    hx-target="#cluster-options"
    hx-swap="outerHTML"
    hx-include="#cluster [data-combobox-search], #cluster input[type=hidden]">
    <option value={ selectedProvider }>AWS</option>
</select>
@combobox.Combobox(ClusterCfg, combobox.State{})

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/combobox

Open v0.2.7 API

Checkbox File Input