Components / Pickers

Select and combobox

Picks one item from a list that opens under the field. With search it becomes a combobox.

Functions: cui_select

Usage

static int country = 2;
const char *items[] = { "Canada", "Denmark", "Germany", "Japan", "Kenya" };
cui_select(ui, "country", items, 5, &country, .label = "Country");
cui_select(ui, "lang", languages, n, &lang, .searchable = true, .placeholder = "Pick a language");

searchable adds a filter field at the top of the list (a combobox). Keyboard: Up/Down open the list and move the highlight, Enter chooses, Esc closes.

Returns true on the frame the choice changes. country is your int, the index of the chosen item. A value outside 0 to count - 1, such as -1, means nothing is chosen, and the field then shows placeholder, or "Select". Choosing an item closes the list, which scrolls once it is taller than 300 points. The search keeps the items that contain the typed text, whatever the case. For several choices use the multi-select, and for two to five options that should stay visible use a segmented control.

Keyboard

• Up/Down open the list and move the highlight, Enter chooses, Esc closes.

Options of cui_select

Option	Type	Default	Description
.label	const char *		A label shown above or beside the control.
.placeholder	const char *		Muted text shown while the field is empty.
.icons	const char *const *		One icon per item, in the same order as the items.
.searchable	bool		combobox: filter options by typing
.disabled	bool		Greyed out, and takes no input.
.width	cui_size		Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.

Related

• Segmented control: A compact set of two to five choices where one is always selected, for switching between views of the same content.
• Date picker and calendar: Picks a date from a month grid, as a field that opens a calendar or as a calendar shown inline.
• Color picker: A swatch that opens a saturation and brightness square, a hue bar and preset swatches.
• Multi-select: Picks several items from a list and shows them as chips in the field.