Skip to content
Atrium Logo Atrium Logo Atrium

a-select

Lit Lit
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

Select.close()

src/Select.ts:263

Close the dropdown.

Select.connectedCallback()

src/Select.ts:153

Select.disconnectedCallback()

src/Select.ts:178

Select.open()

src/Select.ts:272

Open the dropdown.

Select.reportValidity()

src/Select.ts:231

Select.reset()

src/Select.ts:238

Resets the value of the select to undefined.

Select.selectNext()

src/Select.ts:195

Select the next option.

Select.selectPrev()

src/Select.ts:208

Select the previous option.