Select <select>

Selects are used to pick a single option from a dropdown list. Commonly used in forms for choosing categories, countries, or any predefined set of values.

HTML tag<select>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Native HTML Element

Options

Item 1 Item 2 Item 3

Code

HTML

<select class="l-select">
  <button class="l-button">
    <selectedcontent> </selectedcontent>
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path
        fill="currentColor"
        d="m7 10l5 5l5-5z"
      />
    </svg>
  </button>
  <option class="l-select-item">
    <span class="option-text">Item 1</span>
  </option>
  <option class="l-select-item">
    <span class="option-text">Item 2</span>
  </option>
  <option class="l-select-item">
    <span class="option-text">Item 3</span>
  </option>
</select>

Accessibility

Criteria

Role

Uses native <select> — built-in combobox/listbox semantics

WCAG4.1.2

RGAA11.1

Accessible name

Must have an associated <label> element

WCAG1.3.14.1.2

RGAA11.1

Disabled state

Native disabled attribute prevents interaction and announces as disabled

WCAG4.1.2

Required state

Native required attribute communicates mandatory field to assistive tech

WCAG3.3.2

RGAA11.10

Keyboard interactions

Enter

Opens the option list or confirms selection

Space

Opens the option list

ArrowDown

Moves to the next option

ArrowUp

Moves to the previous option

Tab

Moves focus to the next focusable element

API reference

Importing

CSS

@import 'luxen-ui/css/select';

Attributes & Properties

disabledAttribute

Disables the select

requiredAttribute

Marks the field as required

multipleAttribute

Allows multiple selections

Events

changeEvent

Fired when the selected option changes

inputEvent

Fired when the selection changes (same as change for <select>)

CSS classes

.l-selectClass

Base select element with appearance: base-select

.l-select-itemClass

Option styling with checkmark indicator

CSS custom properties

--radiusName

Border radius (default: 4px)

--border-colorName

Border color (adapts to light/dark)