Filter Dropdown

The inherited Ecology filter control, wearing the Biochar Atlas skin. A trigger button opening a searchable option panel — single or multi-select with checkbox rows, keyboard navigation, and a Clear all footer. The active trigger tints with forest green from --color-primary.

Inherited wc import '@esa/ecology/esa-filter-dropdown';

Single select

Click to open the panel; pick one option and it closes, echoing the choice on the trigger as “Label: Value”.

<esa-filter-dropdown name="feedstock" label="Feedstock" placeholder="Search feedstocks"></esa-filter-dropdown>

Multi select

With multiple, options toggle independently, the panel stays open, and a count badge sits on the trigger.

<esa-filter-dropdown name="goals" label="Goals" multiple></esa-filter-dropdown>

Color dots

An option's optional color — any CSS color, including var() refs resolved against the host page — renders a leading dot. Here the Atlas provenance tokens color the source filter.

el.options = [
  { label: 'Auto-derived (SSURGO)', value: 'ssurgo', color: 'var(--bca-provenance-ssurgo)' },
  { label: 'User-provided soil test', value: 'user', color: 'var(--bca-provenance-user)' },
];

Sizes

<esa-filter-dropdown size="xs"></esa-filter-dropdown>
<esa-filter-dropdown size="sm"></esa-filter-dropdown>
<esa-filter-dropdown size="md"></esa-filter-dropdown>
<esa-filter-dropdown size="lg"></esa-filter-dropdown>

API

Prop	Type	Default	Description
`name`	`string`	`''`	Filter key reported in esa-filter-change events.
`label`	`string`	`''`	Trigger text. Single-select shows "Label: Value" when set; multi-select keeps the bare label plus a count badge.
`options`	`{ label, value, disabled?, color? }[]`	`[]`	Options. Set as a property. An optional color (any CSS color, incl. var() refs) renders a leading dot.
`multiple`	`boolean`	`false`	Checkbox-style multi-select with a count badge on the trigger.
`placeholder`	`string`	`''`	Placeholder for the in-panel search input (falls back to "Search...").
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size (reflected attribute).

Events

Event	Type	Default	Description
`selection-change`	`CustomEvent<{ value: string \| string[] \| undefined }>`	—	Fired on every selection change for direct listeners. Composed and bubbles.
`esa-filter-change`	`CustomEvent<{ name, filters }>`	—	Companion event for a parent filter container — carries the filter name and the active { name, label, value, displayValue } entries.