Skip to main content
Version: Previous

Web Components - Listbox

An implementation of a listbox. While any DOM content is permissible as a child of the listbox, only alpha-option elements, option elements, and slotted items with role="option" will be treated as options and receive keyboard support.

The listbox component has no internals related to form association. For a form-associated listbox, see the alpha-select component.

Set-up​

import { provideDesignSystem, alphaListbox, alphaOption } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaListbox(), alphaOption());

Usage​

<div>
  <label id="preferred-format">Preferred Format:</label><br />
  <alpha-listbox aria-labelledby="preferred-format" name="preferred-format">
    <alpha-option value="vinyl">Vinyl Record</alpha-option>
    <alpha-option value="casette">Casette</alpha-option>
    <alpha-option value="cd">Compact Disc</alpha-option>
    <alpha-option value="digital">Digital</alpha-option>
  </alpha-listbox>
</div>

Additional resources​