Select

Preview

<esa-select label="Fruit" placeholder="Choose a fruit"></esa-select>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-select';

@Component({
  selector: 'app-select-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-select label="Fruit" placeholder="Choose a fruit"></esa-select>
  `,
})
export class SelectDemo {}

Select or Combobox?

If the user picks from what you gave them, it is a Select. If they type into it, it is a Combobox.

• Select — a button opens a list. Reach a distant option by typeahead: type c, a and it jumps to the first “Ca…” option, the way a native <select> does. The list is never filtered.
• Combobox — an input with suggestions. It filters as you type and can fetch remotely (debounced search event, loading, results-count).

Until 2026-08-15 both components had this backwards: searchable defaulted to on here, so every select rendered an editable autocomplete, while Combobox defaulted to a button trigger. Both defaults are now correct and the old props are deprecated shims that still work and warn.

Sizes

Three sizes, not four. Select has no xs: at 28px the trigger and its chevron fall below a comfortable tap target, and because the option list it opens is sized independently, shrinking the trigger buys nothing downstream. sm is the floor — reach for it in dense table rows and filter bars. Controls without a popup, like Text Field, still offer xs.

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

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-select';

@Component({
  selector: 'app-select-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-select label="Small" size="sm"></esa-select>
    <esa-select label="Medium" size="md"></esa-select>
    <esa-select label="Large" size="lg"></esa-select>
  `,
})
export class SelectDemo {}

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>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-select';

@Component({
  selector: 'app-select-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class SelectDemo {}

API

Events

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.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.