Components / Pickers
Multi-select
Picks several items from a list and shows them as chips in the field.
Functions: cui_multi_select
Usage
static bool chosen[6];
const char *langs[] = { "C", "C++", "Rust", "Zig", "Go", "Swift" };
cui_multi_select(ui, "langs", langs, 6, chosen, .label = "Languages", .searchable = true);The field shows chips (with remove buttons) for up to max_chips items and "+N" for the rest. The list keeps itself open while you tick items and has a select all / clear action. Up, Down and Space or Enter work in the list.
Returns true on a frame the selection changes, whether from the list, a chip's remove button or the select all action. chosen is your array with one bool for each item; the picker reads and writes it and keeps only the search text. The search keeps the items that contain the typed text, ignoring the case of ASCII letters. The field is 300 points wide by default and shrinks in a narrower container.
Keyboard
- Up, Down and Space or Enter work in the list.
- Enter, Space or Down on the focused field opens the list. In the list, Up and Down move the highlight, Enter or Space ticks the highlighted item, and Esc closes the list.
Options of cui_multi_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 | a search field at the top of the list that filters the items as you type | |
.max_chips | int | 3 | chips before "+N", default 3 |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. |
Related
- Date range picker: Picks a start and an end date, with presets such as the last 7 days.
- Color picker: A swatch that opens a saturation and brightness square, a hue bar and preset swatches.
- Time picker: Picks a time of day from scrolling columns of hours and minutes.
- Date picker and calendar: Picks a date from a month grid, as a field that opens a calendar or as a calendar shown inline.