Combobox
Built-in Combobox tags — Select, Autocomplete, MultiSelect, TagsInput, Pill, PillsInput, TreeSelect, and the low-level Combobox primitive, each a single Markdown tag.
The Combobox family is Mantine’s set of dropdown / select / autocomplete inputs.
Aardvark wraps each one as a first-class {% tag %} so you can drop
a searchable select or a tags field into a page with no JavaScript. They hydrate into
fully interactive islands in the browser.
- Select — a searchable single-select dropdown.
- Autocomplete — a free-text input with a suggestion list.
- MultiSelect — pick several options, shown as removable pills.
- TagsInput — type free-text tags, with optional suggestions.
- TreeSelect — pick a leaf from a collapsible hierarchy.
- Pill — the small rounded chip the multi-value inputs render.
- PillsInput — the input shell that holds pills plus a field.
- Combobox — the low-level primitive everything else is built on.
Options data
Every select-style tag takes its options through data. The simplest form is a
comma-separated list of strings, and value::label pairs let a short stored value carry a
friendly label:
{% select data='React, Vue, Svelte' %}
{% select data='us::United States, ca::Canada, mx::Mexico' %}
For grouped, disabled, or otherwise richer options, pass a full JSON array through
dataJson instead (it wins over data):
{% select dataJson='[{"group":"Frontend","items":["React","Vue"]},{"group":"Backend","items":["Django","Rails"]}]' %}
Select, Autocomplete, MultiSelect, and TagsInput all share this convention;
TreeSelect takes a nested JSON tree instead (see its page).
High-level vs. primitives
Most of the time you want the ready-made inputs — Select, MultiSelect,
Autocomplete, TagsInput, TreeSelect. The remaining two,
Combobox and
PillsInput, are the composition primitives the
others are built from; their pages explain when (rarely) you’d reach for them directly.