a-select
A customisable dropdown select element for choosing from a list of options.
The a-select element provides a fully customisable dropdown for selecting options. It integrates with native forms, supports keyboard navigation, and handles accessibility automatically.
Used by the Select and Combobox components.
Usage
Basic Usage
<a-select name="country">
<button slot="trigger" type="button">
Select a country
</button>
<div class="options">
<a-option value="au">Australia</a-option>
<a-option value="nz">New Zealand</a-option>
<a-option value="uk">United Kingdom</a-option>
</div>
</a-select>Form Integration
The a-select element works seamlessly with native HTML forms:
<form id="order-form">
<label for="size-select">Size</label>
<a-select id="size-select" name="size">
<button slot="trigger" type="button">Choose size</button>
<div class="options">
<a-option value="s">Small</a-option>
<a-option value="m">Medium</a-option>
<a-option value="l">Large</a-option>
</div>
</a-select>
<button type="submit">Submit Order</button>
</form>
<script>
document.getElementById('order-form').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
console.log('Selected size:', formData.get('size'));
});
</script>Keyboard Navigation
The select element supports full keyboard navigation:
| Key | Action |
|---|---|
Enter / Space | Open dropdown or select focused option |
ArrowDown | Move focus to next option |
ArrowUp | Move focus to previous option |
Escape | Close dropdown without selecting |
Home | Move focus to first option |
End | Move focus to last option |
| Type character | Jump to option starting with that letter |