a-select

Lit

Select

Option 1Option 2Option 3Option 4

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-700 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.

Methods

---

Show ↴ ↶

Select.close()

src/Select.ts:264

Close the dropdown.

Select.open()

src/Select.ts:273

Open the dropdown.

Select.reportValidity()

src/Select.ts:232

Select.reset()

src/Select.ts:239

Resets the value of the select to undefined.

Select.selectNext()

src/Select.ts:196

Select the next option.

Select.selectPrev()

src/Select.ts:209

Select the previous option.