Listbox
A pure vanilla JS implementation of Zag JS Listbox
Anatomy
The Listbox component consists of the following data-part
root
label
content
item
item-group
item-group-label
It can include multiple item, item-group and item-group-label parts.
data-value is required on all item parts
- Item A
- Item B
- Item C
- Item D
Group Items
The Listbox items can be grouped with a label to identify each group
Please note you must provide and id to item-group and item-group-label and not a value
- Item A
- Item B
- Item C
- Item D
Column Layout
The Listbox can use the grid layout by adding data-column-count
The column count is available as dynamic css variable--column-count which is used in the component css
- Item A
- Item B
- Item C
- Item D
Data attributes
Each listbox can be set with different settings with the following data-attribute.
- Item A
- Item B
- Item C
- Item D
Callbacks
Each Listbox component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the listbox and a event listener for your event name
document.getElementById("my-callback-listbox")
?.addEventListener("my-callback-listbox-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
- Item A
- Item B
- Item C
- Item D
Open your browser's console to see the events received when a listbox item is selected
RTL
RTL support for listbox
- Item A
- Item B
- Item C
- Item D
Custom (Tailwind)
If you are using Tailwind styling, you can customize each listbox and its parts with Tailwind utilities
- Item A
- Item B
- Item C
- Item D
Templates
Listbox components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.