v0.11.0

Appearance

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 ​

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
Fires when an option is selected.
inputEvent
Fires when the value changes.

CSS classes ​

.l-selectClass
Base select element with appearance: base-select.
.l-select-itemClass
Option styling with checkmark indicator.

CSS custom properties ​

--border-radiusdefault:4pxCustom property
Border radius.
--border-colorCustom property
Border color (adapts to light/dark).