Select

The inherited Ecology searchable select, wearing the Beacon skin. Single/multi-select with type-to-filter and removable chips; the active option and focus state pick up brand teal from --color-background-brand.

Inheritedwcimport '@esa/ecology/esa-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

<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

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