Skip to main content

Listbox

Listbox are lists of items grouped together. List items in a listbox can be either grouped or ungrouped. They can also have checkboxes as a variant allowing users to select multiple items at once.

Variants​

A total of 8 variants of listboxes are available in GEL. 4 with checkboxes and 4 without.

Listbox State

Demo​

Listbox demo

Guidance​

  • Listbox in a single select input will close the Listbox after a value has been selected from the option.
  • Listbox in a multi select input will close the Listbox after the user has clicked anywhere outside the Listbox dialog.
  • When user searches for a value in the listbox, the list should be filtered to match the search value.

When to use​

  • Listbox are used to display multiple options for a select input.

When no to use​

  • If the options withing the panel or dropdown performs actions, consider using one of the available variation tiered menu instead.
  • If the options to be displayed are less than 5, consider using checkbox or radio button group instead of a select with listbox(combobox).

Consideration​

Lisbox consideration

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP
Last updated on