Select

Custom select dropdown with full keyboard support.

Usage

<w-select value="option1">
  <w-slot trigger>
    <button>
      <w-slot value><span>Option 1</span></w-slot>
    </button>
  </w-slot>
  <w-slot menu>
    <div>
      <w-slot opt data-value="option1"><div>Option 1</div></w-slot>
      <w-slot opt data-value="option2"><div>Option 2</div></w-slot>
      <w-slot opt data-value="option3"><div>Option 3</div></w-slot>
    </div>
  </w-slot>
</w-select>

Props

Prop	Type	Default	Description
value	string	""	Currently selected value
open	boolean	false	Whether dropdown is open
disabled	boolean	false	Disable the select
persistent	boolean	false	Prevent closing via Escape or outside click
placeholder	string	""	Placeholder text
portal	boolean	true	Teleport listbox to body

Slots

Slot	Element	Description
trigger	Button	The select button
display	Span	Shows selected value text
listbox	Container	Options container
option	Any	Selectable options (use data-value)

Events

Event	Detail	Description
change	{ value }	Fired when selection changes

Keyboard

Key	Action
Enter / Space	Open dropdown / Select option
ArrowDown	Open dropdown / Next option
ArrowUp	Previous option
Home	First option
End	Last option
Escape	Close dropdown

Styling

The listbox is teleported to the portal when open and positioned by autoPosition. Style by role. The currently keyboard-highlighted option gets a data-highlighted attribute.

/* Trigger */
w-select w-slot[trigger] > * {
  /* button-like trigger */
}
w-select w-slot[trigger] > *[aria-expanded="true"] {
  /* while open */
}

/* Listbox panel — teleported, target by role */
[role="listbox"] {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Options */
[role="option"] {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Currently selected */
[role="option"][aria-selected="true"] {
  background: #eef2ff;
  font-weight: 500;
}

/* Keyboard-highlighted (arrow-key navigation) */
[role="option"][data-highlighted] {
  background: #f0f0f0;
}

Selector	Targets
[role="listbox"]	The dropdown panel
[role="option"][aria-selected="true"]	Selected option
[role="option"][data-highlighted]	Keyboard-focused option
w-select[disabled]	Disabled select
w-select[open]	Open select

Accessibility

• Trigger has role="combobox"
• Listbox has role="listbox"
• Options have role="option" with aria-selected
• Full keyboard navigation support