Combobox

Single

Add data-stisla-combobox and Tom Select hydrates the native select into a trigger that holds the chosen value and a search input; opening it filters the options as you type and marks the selected row and the keyboard cursor.

Keyboard

The trigger behaves like a searchable picker. Focus lands in the search input as soon as the popup opens.

• ArrowDown / ArrowUp: move highlight through the filtered list
• Enter: pick the highlighted option (creates a new tag in tagging mode)
• Escape: close the popup
• Backspace: remove the last chip in multi mode when the search input is empty
• Type any letter: filter the list

Multiple

Add the native multiple attribute and each chosen value becomes a chip with a remove handle; the trigger grows to fit as chips wrap.

Sizes

.combobox--sm and .combobox--lg retune height, padding, radius, and type around the default.

Tagging

Set data-stisla-combobox-create="true" to let users add values that aren't in the list. The new value lands in the options as the user presses Enter.

Option groups

Wrap related options in <optgroup> to label sections inside the popup. Search runs against the option labels; the group label is just a header.

Disabled

Add disabled to block interaction. The wrapper picks up .disabled from Tom Select automatically.

Browser validation

Native HTML constraints gate form submission as they would on a native <select>. Add required with an empty placeholder <option value=""> and the form blocks until the user picks a real value. The browser's tooltip is suppressed because it would anchor to the hidden source, so render the error text with .field__error. The wrapper picks up the danger border automatically when constraints fail and clears it once the new value is valid.

Invalid

Set aria-invalid="true" on the source <select>. The wrapper picks it up via :has() and paints the danger border.

Events

Listen for stisla:combobox:change to react to selection changes. The event's detail.value is a string for single, an array for multi.

Customization

These variables retune the combobox. The field shares the form-field knobs; the dropdown reuses the menu surface.