Dropdown Typeahead

<dsx-dropdown-typeahead> — Dropdown Typeahead

Searchable dropdown control that supports both single-select and multi-select flows.

Live Preview

Import

import '@bnotk/dsx/components/dropdown-typeahead.js';

Usage

<dsx-dropdown-typeahead id="city-picker" placeholder="Choose a city"></dsx-dropdown-typeahead>

<script type="module">
  document.getElementById('city-picker').options = [
    { value: 'berlin', label: 'Berlin' },
    { value: 'hamburg', label: 'Hamburg' }
  ];
</script>

Types

DsxOption

Option contract consumed by the options property.

Field	Type	Description
value	string	Submitted/stored value.
label	string	Visible option label used for filtering and display.
disabled	boolean	Optional flag that blocks selection.

Elements

<dsx-dropdown-typeahead>

Composite control with selection tokens, optional search input, clear button, and dropdown list.

Properties

Property	Type	Default	Description
options	DsxOption[]	[]	Available options rendered in the dropdown.
value	string[]	[]	Selected values. Even single-select mode stores the selection internally as an array.
multiple	boolean	false	Enables checkbox-style multi-selection and removable tokens.
searchable	boolean	true	Shows a live search input while the dropdown is open.
placeholder	string	”	Placeholder text shown when nothing is selected.
disabled	boolean	false	Disables open/close interactions and applies disabled styling.

Methods

None.

Events

Event	Detail	Description
dsx-change	{ value: string | string[] }	Bubbles/composed after selection, deselection, token removal, or clear.
dsx-search	{ query: string }	Bubbles/composed whenever the search input value changes.

Slots

None.

CSS Parts

This element does not expose shadow parts.

Notes

• Outside clicks are detected with a document mousedown listener registered after opening.
• ArrowDown and ArrowUp move the highlight; Enter selects the highlighted option; Escape closes and clears the query.
• In single-select mode the control closes immediately after a selection and the event detail contains a single string instead of an array.

Behavior Notes

• Options are filtered case-insensitively against label.includes(query).
• Multiple mode shows token chips inside the control plus a checkbox in each dropdown option.
• Selected options gain the selected class; keyboard-highlighted options gain the highlighted class; disabled options ignore selection.
• The clear button only appears when at least one value is selected.

Styling Notes

• The control uses inset box-shadow borders and switches to a 2px focus ring with --ds2-color-focus when open.
• Dropdown is absolutely positioned below the control with a 15rem max height and internal scrolling.
• Tokens use small grey pills; the dropdown uses white surface, grey border, and highlight colors from the token set.