@swivel/ui/elements/select

Select

The ui-select element creates a fully accessible select popup with a button trigger and a ui-listbox overlay. The ui-select element extends the ui-popup element and inherits all of its properties and configuration options. The trigger is created by the ui-select while the ui-listbox has to be provided by the user:

    <ui-select>
      <ui-listbox data-part="overlay">
        <ui-listitem data-value="January">January</ui-listitem>
        <ui-listitem data-value="February">February</ui-listitem>
        <ui-listitem data-value="March">March</ui-listitem>
        <ui-listitem data-value="April">April</ui-listitem>
      </ui-listbox>
    </ui-select>
    

Similar to regular input elements, the ui-select element:

• has a value property, which supports arbitrary types of values,
• and dispatches a ui-value-changed event when its value is changed through user interaction

A value can be preselected by adding the aria-selected (or aria-checked for menuitemcheckbox/menuitemradio items) attribute to the selected ui-listitem. This will also set the initial value of the ui-select element.

Plain HTML Example

This example shows a select using plain HTML and no data-binding or templating.

Component Example