The component reads your objects — you only tell it which property holds the value, the label, the icon, and so on. Anything a plain property can't express becomes a callback.

DA01 Data shapes

Member attributes map your object properties onto the control.

Quick usage 
 
 
  • value-member, display-value-member and icon-member point at properties of each option
						(code, name, flag here).
    •  
  • Every member has a callback counterpart — getValueCallback, getDisplayValueCallback, getIconCallback, … — for computed values. Callbacks are set as
						properties in JS (never attributes) and take precedence over the
						matching member.
    •  
  • An array of [key, value] tuples is auto-detected — no members required.
 
getDisplayValueCallback 
 
 
 
 
DA02 Form value-format
 
A named control auto-creates hidden inputs so it submits like any native field.
 
  
Select a few items, then inspect the DOM — hidden inputs named “stack” appear in the light DOM and update live.
 
Controls 
 
  
json → ["a","b"] · csv → a,b · array → repeated name[] inputs
 
Quick usage 
 
 
 
  • With a name, the component writes the selection into auto-created
						hidden <input>s in the light DOM, so a normal FormData / form submit picks it up.
    •  
  • value-format controls the serialization: json → ["html","css"], csv → html,css, array → one repeated stack[] input per value.
 
 
DA03 Imperative API (v2.0.0)
 
Drive the dropdown, the search box and scrolling from your own code.
 
 
      
 
 
 
Quick usage 
 
 
 
Last getValue():
 
(not read yet)
 
  • open() / close() / toggle() and the isOpen getter/setter drive the dropdown — new in v2.0.0.
    •  
  • search(term) applies a query as if typed (without opening the
						dropdown), searchText reads it back, and clearSearch() restores the full list — new in v2.0.0.
    •  
  • scrollToIndex / scrollToValue / scrollToGroup bring an option into view (they return false when it is filtered out) —
						new in v2.0.0.
    •  
  • See the full list on the Methods page.
 
 
DA04 · Deferred initialization (v2.1.0)
 
A custom element upgrades the instant its script loads and paints with the component's default styles, so anything you wire in afterward — a customStylesCallback, your options — lands a beat late and the badges visibly
				restyle: the classic flash. The defer attribute holds the first render until
				you release it.
 
 
  held — waiting for data…
 
  • While defer is set the element builds nothing on upgrade
					(it only reserves space via :host([defer]:not([is-ready]))), so you wire options, callbacks and listeners first.
    •  
  • ready() — or removing the defer attribute, which suits
					server-driven frameworks like Phoenix LiveView — builds the picker once,
					with the purple pre-selected badges appearing in one shot. The gate is latched.
    •  
  • isReady is reflected as an is-ready attribute, and a one-time ready event fires right after the first build. See the methods page.
 
defer / ready()