Filter Dropdown

Preview

Click the trigger to open the panel, type to filter, and use Arrow/Enter/Escape to navigate. Outside-click and Escape close it. Options are set as a property in a small init script.

<esa-filter-dropdown name="status" label="Status"></esa-filter-dropdown>

<script>
  import '@esa/ecology/esa-filter-dropdown';
  customElements.whenDefined('esa-filter-dropdown').then(() => {
    document.querySelector('esa-filter-dropdown').options = [
      { label: 'Open', value: 'open' },
      { label: 'In review', value: 'review' },
      { label: 'Closed', value: 'closed' },
    ];
  });
</script>

Select modes

Single select closes on choice; multiple keeps the panel open, shows checkmarks, and renders "first +N" in the trigger.

<esa-filter-dropdown name="status" label="Status"></esa-filter-dropdown>
<esa-filter-dropdown name="dept" label="Department" multiple></esa-filter-dropdown>

Sizes

<esa-filter-dropdown label="XS" size="xs"></esa-filter-dropdown>
<esa-filter-dropdown label="Small" size="sm"></esa-filter-dropdown>
<esa-filter-dropdown label="Medium" size="md"></esa-filter-dropdown>
<esa-filter-dropdown label="Large" size="lg"></esa-filter-dropdown>

States

Disabled options are dimmed, skipped by keyboard navigation, and not selectable.

<esa-filter-dropdown name="priority" label="Priority"></esa-filter-dropdown>
<!-- options include { label: 'High', value: 'high', disabled: true } -->

API

Events

Accessibility

• Trigger is a native <button> with aria-haspopup="listbox" and aria-expanded reflecting open state.
• Panel is a role="listbox"; each option is role="option" with aria-selected and aria-disabled.
• Keyboard: ArrowUp/Down highlight (skipping disabled), Enter selects, Escape closes. Opening focuses the search input.
• Visible focus ring on the trigger via --focus-ring-* tokens.

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.