`), or a `.combobox-empty` paragraph when nothing matches. This demo's endpoint is part of the dev server, so it only answers on a running site, not on a static host. ## Submitting with htmx Every change fires a bubbling `combobox:change` with `detail.value` and `detail.label` (the first pick) and `detail.values` / `detail.labels` (all of them). Inside a form, trigger on it and htmx posts the hidden `[data-combobox-value]` fields with the rest: ```html

``` ## Alignment The list opens below the input, as wide as the combobox. `.combobox-content-up` opens it above, and `.combobox-content-end` aligns a list wider than the input (a `w-80` utility) to the right edge. ## Nunjucks macro The `combobox` macro writes the input group or chip box, the options, groups and separators, and the hidden field. Options are strings, `{value, label, keywords, disabled}` objects, or groups `{label, options}`. ```jinja page.html {% from "components/combobox/combobox.html" import combobox %}

Framework {{ combobox("framework", json("data/frameworks.json"), name="framework", autohighlight=true) }}

{{ combobox("tags", ["Bug", "Feature", "Docs"], multiple=true, value=["Bug"], name="tags", label="Tags") }} {{ combobox("tz", [{label: "Europe", options: [...]}, {label: "Asia", options: [...]}], label="Timezone") }} ``` ## Reference | Class / attribute | Description | | --- | --- | | `.combobox` | Positioning wrapper. Add data-combobox. | | `.combobox-content` | The listbox. Opens below, as wide as the combobox. | | `.combobox-content-up / -end` | Open above / align to the right edge. | | `.combobox-item` | One option (role="option", value). data-keywords: extra words to match. | | `.combobox-check` | Icon in an option, shown while it is picked. | | `.combobox-item-description` | Muted text at the end of an option. | | `.combobox-group / .combobox-label` | A group of options (role="group") and its heading. | | `.combobox-separator` | A line between groups (role="separator"); hidden when a filter empties one side. | | `.combobox-empty` | Shown when nothing matches. Add data-combobox-empty. | | `.combobox-chips / .combobox-chips-input` | Multiple: the box that looks like an input, and the input inside it. | | `.combobox-chip / .combobox-chip-remove` | A pick and its remove button, built by the behaviour. | | `[data-combobox-input]` | The text input (becomes role="combobox"). | | `[data-combobox-value]` | Hidden field with the value; one per value with data-multiple. | | `[data-combobox-clear] / [data-combobox-toggle]` | Clear button (hides itself when empty) / open-close button. | | `data-multiple / data-autohighlight` | Several picks as chips / highlight the first match as you type. | | `data-filter="none"` | No browser-side filtering, for lists the server filters. | | `combobox:change` | Event with detail { value, label, values, labels }. |