@swivel/ui/elements/listbox

Listbox

The ui-listbox element creates a fully accessible list of options which allows users to select one of the options. Each option in a listbox is declared using a ui-listitem element:

    <ui-listbox>
      <ui-listitem data-value="One">Item One</ui-listitem>
      <ui-listitem data-value="Two">Item Two</ui-listitem>
      <ui-listitem data-value="Three">Item Three</ui-listitem>
      <ui-listitem data-value="Four">Item Four</ui-listitem>
    </ui-listbox>
    

Similar to regular input elements, the ui-listbox 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

Similar to regular option elements, the ui-listitem element:

• has a value property, which supports arbitrary types of values,
• supports different roles, like option, menuitem, menuitemcheckbox or menuitemradio
• can be preselected by setting the aria-selected or aria-checked attribute
• can be disabled by setting the aria-disabled attribute
• additionally supports custom templates and styling

Plain HTML Example

This example shows a listbox using plain HTML and no data-binding or templating. The value for each item is set using the data-value attribute.

Component Example