ComboBox

ComboBox

Dropdown with items and .onSelectionChange((event)).

Quick Start

Controls Combobox

@view('ControlsCombobox')
export class ControlsComboboxView extends BaseExampleScreenView<ControlsComboboxState> {
  @state selectedIndex: number = 0;

  protected getViews(): ViewStruct<ViewState>[] {
    // --- edit below ---

    return [
      VGroup([
        Label({ text: `Selected Index: ${this.selectedIndex}` }),
        ComboBox({
          selectedIndex: this.selectedIndex,
          width: 320,
          height: 63,
          placeholder: 'Choose',
          items: [
            { label: 'First', value: 'first' },
            { label: 'Second', value: 'second' },
            { label: 'Third', value: 'third' },
          ],
          styleKey: 'controls.ComboBox.default',
          isDropdownOpen: false,
        }).onSelectionChange((event) => { this.selectedIndex = event.index; })
          .isInitialFocus(true)
      ]).itemSpacing(12)
    ];
    // --- edit above ---
  }
}

Tip: Items Shape

items is IComboBoxItem[] where each item is { label: string; value: unknown }. Bind selectedIndex to state for a controlled dropdown.

More Examples

See the ComboBoxRig in examples for multi-ComboBox layouts and focus behavior.

API Reference

ComboBox API