a-select

A customisable dropdown select element for choosing from a list of options.

Usage
Form Integration
Keyboard Navigation
References

Usage

import "@sv/elements/select";

Variants

No variants

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>

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

Select

Accessible and styleable select component.

Example

<form onchange="console.log(event.target.value)" onsubmit="event.preventDefault()">
 <a-select name="test" class="text-base">
  <button type="button" slot="trigger" class="cursor-pointer">
    <div class="w-[150px] text-left">Select</div>
  </button>

  <div class="mt-1 border border-zinc-200 bg-zinc-800 p-1">
    <a-option class="block p-1 [&[selected]]:bg-zinc-700 active:bg-zinc-700 hover:bg-zinc-600" value="option-1">Option 1</a-option>
    <a-option class="block p-1 [&[selected]]:bg-zinc-700 active:bg-zinc-700 hover:bg-zinc-600" value="option-2">Option 2</a-option>
    <a-option class="block p-1 [&[selected]]:bg-zinc-700 active:bg-zinc-700 hover:bg-zinc-600" value="option-3">Option 3</a-option>
    <a-option class="block p-1 [&[selected]]:bg-zinc-700 active:bg-zinc-700 hover:bg-zinc-600" value="option-4">Option 4</a-option>
  </div>
 </a-select>
</form>

Attributes

Name	Type	Default value	Description
`direction`	"up" \| "down"	"down"	In what direction the dropdown openes.
`disabled`	boolean	false	Whether the dropdown is disabled.
`name`	string	undefined	The name or key used in form data.
`opened`	boolean	false	Whether the dropdown is open.
`required`	boolean	false	Wether the input is required.
`value`	string	undefined	The selected option.

Events

Name	Description
`change`	Fired when the value changes.
`input`	Fired when the selected value changes.
`open`	Fired when the dropdown is opened.
`close`	Fired when the dropdown is closed.