Combobox

Search longer choice lists while keeping native form behavior.

Local search

Timezone override, based on Baseplate’s account settings field. Search does not submit your typed text. Leave the empty value selected to use the organization default.

Use the organization default unless you work in another timezone.

Remote search

The application answers a query event. This portable example simulates a remote window over public timezone choices; Baseplate has no new search endpoint or rollout here. This second control submits to the same form through its native form attribute.

Type two characters. “pa” takes 900ms; “par” takes 100ms. Type “fail” for a failed search or “zz” for no results.

Try failure and update cases

These controls belong to this demonstration, not the reusable combobox.

Required choice

This separate example uses an empty placeholder. Unlike the optional organization-default value above, it must be replaced before submission.

Required timezone

Native select for short lists

Short lists stay native. Without JavaScript, every example above is also an ordinary labelled native select.

Real GET submission returns to this page with the chosen values in the URL. Query text has no submitted name.

Optional module contract

Code

<div class="field" data-combobox>
  <label for="zone">Timezone override</label>
  <select id="zone" name="interface_timezone">
    <option value="" selected>Use organization default</option>
    <option value="Asia/Makassar">Asia/Makassar</option>
  </select>
</div>

import { createCombobox } from '/dist/combobox.js';
const control = createCombobox({ root, mode: 'remote' });
root.addEventListener('combobox-query', ({ detail }) => {
  // Application owns fetching, authorization and filtering.
  // Answer with the same contextId, requestId and query.
  control.applyResults({ ...detail, items: [{ value: 'UTC', label: 'UTC' }] });
});
// Or dispatch combobox-results on root with the same result detail.
// A rejected saved value is a native form validation error:
select.setCustomValidity('The application rejected this value.');
control.refresh();
// Dispose before replacing the whole root; in-place options can refresh.
control.dispose();
Local defaults
No minimum, no debounce; accent-insensitive matching of labels/values.
Remote defaults
Two trimmed Unicode code points, 250ms debounce; trimmed Unicode query, not case- or accent-folded.
Results
combobox-results detail: {contextId, requestId, query, items, error?}. Items: unique string value, string label, optional boolean disabled. At most 50 displayed by default.
Selection
Arrow navigation highlights; Enter or a tap commits. Escape restores the selected label. Native select input/change events are emitted on commitment; combobox-change carries {name,value,label}. Search results never confirm a save.
Form guarantees
One native select owns the submitted name/value, required/custom validity, disabled fieldsets, form association and reset default. The editable input has no name. No formdata shim or hidden input is used.

Manual · Wrapper and lifecycle contract

Source candidate: Baseplate account interface_timezone, at 6accb8a; owner: Baseplate account/settings and timezone code. These examples do not migrate it.