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

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