A scroll-safe list of options for a consumer-owned selection model. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
listbox,listbox-option,listbox-group,listbox-empty
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<div class="listbox" role="listbox" aria-label="Choose a team member" tabindex="0">
<div class="listbox-option" role="option" aria-selected="true" id="person-ada">Ada</div>
<div class="listbox-option" role="option" aria-selected="false" id="person-grace">Grace</div>
</div>Variants and composition
listbox-option is an option, listbox-group labels a subset, and listbox-empty represents no results. Selected and focused states come from consumer state.
Behavior and accessibility
The styles do not implement option selection, roving focus, typeahead, or keyboard handling. Use a native select when that behavior is not implemented.
Reference
See the interactive Storybook specimen. Continue to Loading or return to the Official preset overview.