Select

The inherited Ecology searchable select, wearing the Biochar Atlas skin. Single/multi-select with type-to-filter and removable chips; the active option and focus state pick up forest green from --color-primary.

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

Preview

<esa-select label="Feedstock" placeholder="Choose a feedstock" 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

<esa-select label="Application goals" multiple chip-mode placeholder="Add goals"></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

Prop	Type	Default	Description
`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 shown below the control.
`error-text`	`string`	`''`	Error message; replaces help text and turns the field red 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.
`chip-mode`	`boolean`	`false`	Render multi-selections as removable chips inside the control.
`searchable`	`boolean`	`true`	Type-to-filter the option list. When false the input is read-only.

Events

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