v0.14.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.

Built on the Customizable Select API (appearance: base-select). Where unsupported it degrades to a native <select> — so always keep meaningful text in each <option>.

HTML tag<select>
⏣Native
⬡Progressive
◇Plain
⬢Shadow-DOM
Native element

Options ​

Basic ​

Add class="l-select" to a native <select> and class="l-select-item" to each <option>.

Code
html
<select
  class="l-select"
  aria-label="Plan"
>
  <option
    class="l-select-item"
    value="free"
  >
    Free
  </option>
  <option
    class="l-select-item"
    value="pro"
  >
    Pro
  </option>
  <option
    class="l-select-item"
    value="team"
  >
    Team
  </option>
</select>

Rich options ​

Put any HTML inside an <option>. Wrap a .l-select-item-title over a .l-select-item-description in .l-select-item-text (add a .l-select-item-media image or icon before it if needed). A <button><selectedcontent></button> trigger mirrors the chosen option — the description is hidden there to keep it compact.

Code
html
<select
  class="l-select"
  aria-label="Merge method"
>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  <option
    class="l-select-item"
    value="squash"
    selected
  >
    <span class="l-select-item-text">
      <span class="l-select-item-title">Squash and merge</span>
      <span class="l-select-item-description">
        The 1 commit from this branch will be added to the base branch.
      </span>
    </span>
  </option>

  <option
    class="l-select-item"
    value="rebase"
  >
    <span class="l-select-item-text">
      <span class="l-select-item-title">Rebase and merge</span>
      <span class="l-select-item-description">
        The 1 commit from this branch will be rebased and added to the base branch.
      </span>
    </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 ​

data-sizexs | sm | md | lg | xlAttribute
Control height on the shared --l-size-control-* scale (default md).
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.
.l-select-item-mediaClass
Leading image/icon inside a rich option.
.l-select-item-textClass
Column wrapper stacking title + description.
.l-select-item-titleClass
Primary label of a rich option.
.l-select-item-descriptionClass
Secondary line of a rich option (hidden in the trigger).

CSS custom properties ​

--heightdefault:var(--l-form-control-height)Custom property
Control height (set via data-size or directly).
--border-radiusdefault:var(--l-form-control-border-radius)Custom property
Trigger border radius.
--caret-colordefault:var(--l-form-control-placeholder-color)Custom property
Chevron color.
--caret-icondefault:mdi:chevron-downCustom property
Chevron mask image; override with any url() to re-skin.