Combobox

View sourcecomponents/combobox.go

Default#

Combobox default example rendered by the production Go component.

Enable JavaScript to run the preview. Go source and install commands remain available.

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, ClearID: clearID, Label: "Framework", Value: values[selected],
    Query: query, Open: open, Content: content, Scope: scope, DismissID: dismissID,
    ShowTrigger: true, ShowClear: selected > 0, Layer: 6,
})
combo.AddLabel("Available targets")
combo.AddItem(components.ComboboxItem{ID: opt.At(0), Label: "Viva Native", Selected: selected == 1})
combo.AddItem(components.ComboboxItem{ID: opt.At(1), Label: "WebGPU", Selected: selected == 2})
combo.AddSeparator()
combo.AddItem(components.ComboboxItem{
    ID: opt.At(2), Label: "Headless tests", Selected: selected == 3,
})
combo.End()

Empty#

Combobox empty example rendered by the production Go component.

Enable JavaScript to run the preview. Go source and install commands remain available.

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, Label: "Framework", Value: values[selected], Query: "mobile",
    Open: open, Content: content, Scope: scope, DismissID: dismissID, Layer: 6,
})
if open {
    combo.AddEmpty("No matching frameworks")
}
combo.End()

Invalid#

Combobox invalid example rendered by the production Go component.

Enable JavaScript to run the preview. Go source and install commands remain available.

combo := components.BeginCombobox(canvas, theme, inputBounds, components.ComboboxOptions{
    InputID: inputID, ClearID: clearID, Label: "Framework", Value: values[selected],
    Query: query, Open: open, Invalid: true, Content: content, Scope: scope,
    DismissID: dismissID, ShowTrigger: true, ShowClear: selected > 0, Layer: 6,
})
combo.AddLabel("Available targets")
combo.AddItem(components.ComboboxItem{ID: opt.At(0), Label: "Viva Native", Selected: selected == 1})
combo.AddItem(components.ComboboxItem{ID: opt.At(1), Label: "WebGPU", Selected: selected == 2})
combo.AddItem(components.ComboboxItem{
    ID: opt.At(2), Label: "Headless tests", Selected: selected == 3,
})
combo.End()

Chips#

Combobox chips example rendered by the production Go component.

Enable JavaScript to run the preview. Go source and install commands remain available.

// chips is the caller-owned []components.ComboboxChip, one RemoveID each.
var rects [5]ui.Rect
components.PaintComboboxChips(canvas, theme, bounds, chips, components.ComboboxChipsOptions{
    InputID: inputID, Label: "Framework", Query: query, Placeholder: "Add a framework…",
    Scope: scope, Focused: canvas.Focused() == inputID,
}, rects[:0])
if index, ok := canvas.ClickedIn(remove); ok {
    chips = append(chips[:index], chips[index+1:]...)
}

Installation

Copy the recipe into your own project.

go run ./cmd/viva add --out ./components/local combobox

Source-owned usage#

This preview calls the production Go component directly. Stable IDs, values and open state remain owned by the application; the component only paints and declares interaction semantics.

Read the linked component source for every option and visual decision.
Use the native command to verify system text, focus, accessibility and platform integration.
The browser preview validates shared layout and scene behavior, not native performance.

Verification boundary#

The examples cover representative states supported by the current API. They do not imply that every desktop backend has completed hardware validation.

Keyboard

Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.