<gui-select />Display an array of strings
Preview Source 
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 ); 
Name 
Type 
Description 
 
 
optionsIOption[]The list of options 
 
 
Name 
Detail 
Description 
 
 
gui-changeThe selected IOption.value 
Triggered when the selected option changes 
 
 
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 ;