7.2.293-stable Switch to dev
In this page
  1. Example
  2. Properties
  3. Events
  4. IOption

<gui-select />

Example

Display an array of strings

const el = document.createElement('div');
const select = document.createElement('gui-select');
const selectedItem = document.createElement('span');
const fruits = [
  'apple',
  'banana',
  'cherry',
  'date',
  'elderberry',
  'fig',
  'grape',
  'honeydew',
  'kiwi',
  'lemon',
  'mango',
  'nectarine',
  'orange',
  'pear',
  'quince',
  'raspberry',
  'strawberry',
  'tangerine',
  'ugli',
  'watermelon',
];
select.options = fruits;
select.placeholder = 'Search value';
select.addEventListener('gui-change', (ev) => {
  selectedItem.textContent = `Selected: ${ev.detail}`;
});
el.appendChild(select);
el.appendChild(selectedItem);

Properties

Name Type Description
options IOption[] The list of options

Events

Name Detail Description
gui-change The selected IOption.value Triggered when the selected option changes

IOption

export type GuiOption<T = any> = {
  value: T;
  /** If defined this is the text of the option, otherwise `value.toString()` will be used */
  text?: string;
  selected?: boolean;
};
export type IOption<T = any> = GuiOption<T> | string;