Text input
Combobox
A field choosing one of a list, which typing filters.
ui.Combobox creates a combobox choosing a *string among options: a
field showing the choice, whose text filters the options below it as the
user types, those starting with it first, while a click or Down shows them
all; a click showing them selects the choice, for typing to replace. Up
and Down move among them and Enter chooses, as does a click; Escape closes
them, and the text goes back to the choice when the field loses the focus.
Changed reports a new choice.
ui.Combobox(c, &app.font, fonts).Label("Font")The field keeps the keyboard focus while the user types and picks.
Placeholder shows a text in it while its text is empty.
For a text that may be anything, with suggestions, use autocomplete; for a short list without typing, a select.
Without a look
ui.ComboboxBase is a combobox without a look: an Input whose text
filters the Items of a Popup below it, which the arrows highlight and
Enter or a click chooses (Chosen): see custom widgets.
When the options are those matching what was typed, as here, tell
assistive technology with
cb.Input.AutoComplete(ui.AutoCompleteList).
A popup without options hides, unless it holds something else to read, as a row saying that nothing matches, which then shows in their place:
cb.Popup(func(panel ui.Element) {
panel.Padding(4).Background(t.Background).Border(1, t.Border)
matches := app.matching(app.query)
for _, f := range matches {
cb.Item(f).Padding(6, 10).Children(func() { ui.Text(c, f) })
}
if len(matches) == 0 {
ui.Text(c, "No matches found").Padding(6, 10).TextColor(t.TextMuted)
}
})Accessibility
Assistive technology sees a combo box named by its Label, editable as a
text field, which expands, and whose options complete what was typed
(aria-autocomplete="list"); the option the arrows are on has the focus
for it, and reads as which of how many it is. With no options, the focus stays
in the field, and a popup showing a row in their place is read out as it
appears.