ComponentsForms

Multi Select

View sourcecomponents/multi_select.go

Default#

Multi Select default example rendered by the production Go component.

Open preview

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

Usage
selection := components.MultiSelectState{AllowCreate: true}
selection.SetOptions([]components.MultiSelectOption{
    {Value: "development", Label: "Development"},
    {Value: "testing", Label: "Testing"},
    {Value: "production", Label: "Production"},
})
// Connect the native input provider to &selection.Query.
// Route input keys to selection.Key(event), clicks to Choose/Remove.
components.PaintMultiSelect(canvas, theme, bounds, &selection, options)

Disabled#

Multi Select disabled example rendered by the production Go component.

Open preview

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

Usage
options.Disabled = true
components.PaintMultiSelect(canvas, theme, bounds, &selection, options)

Installation

Copy the recipe into your own project.

Repository command
go run ./cmd/viva add --out ./components/local multi-select

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.