Prototype Library

Select

Form-associated searchable select with single/multi-select, chips, and full keyboard navigation. A Lit Web Component migrated from the Angular esa-select.

Inherited wc import '@esa/ecology/esa-select';

Preview

<esa-select label="Fruit" placeholder="Choose a fruit" help-text="Type to filter"></esa-select>

Sizes

<esa-select label="Extra small" size="xs"></esa-select>
<esa-select label="Small" size="sm"></esa-select>
<esa-select label="Medium" size="md"></esa-select>
<esa-select label="Large" size="lg"></esa-select>

States

Multi-select renders chips with chip-mode. Error, required, disabled, and read-only states are all driven by attributes.

<esa-select label="Toppings" multiple chip-mode placeholder="Add toppings"></esa-select>
<esa-select label="Required" required></esa-select>
<esa-select label="Error" error-text="Please make a selection"></esa-select>
<esa-select label="Disabled" disabled></esa-select>

API

PropTypeDefaultDescription
label string '' Field label above the control.
options { label, value, disabled? }[] [] Selectable options. Set as a property (not an attribute).
size 'xs' | 'sm' | 'md' | 'lg' 'md' Control size (reflected attribute).
placeholder string 'Select...' Placeholder shown when nothing is selected.
help-text string '' Helper text below the control.
error-text string '' Error message; sets the error state when present.
required boolean false Marks the field required (renders a * after the label).
disabled boolean false Disables interaction (reflected attribute).
multiple boolean false Allow multiple selections.
searchable boolean true Type-to-filter the option list. When false the input is read-only.
chip-mode boolean false In multi-select, render selected values as removable chips.
value string | string[] — Property accessor. Single = string; multiple = string array.

Events

EventTypeDefaultDescription
change CustomEvent<{ value: string | string[] }> — Fired on selection change. Composed and bubbles. Form value is the string (single) or comma-joined values (multiple).

Accessibility

  • Input has role="combobox" with aria-expanded, aria-haspopup="listbox", and aria-autocomplete="list".
  • Dropdown is role="listbox"; options are role="option" with aria-selected / aria-disabled.
  • Keyboard: ArrowUp/Down navigate, Enter selects, Escape/Tab close. Outside-click closes.
  • Chip remove buttons carry an aria-label ("Remove {label}").
  • Form-associated via ElementInternals — value submits with the enclosing form.