TreeSelect

The built-in treeselect tag — pick a leaf from a collapsible hierarchy. Usage, the nested JSON data shape, and a live example.

A built-in tag for selecting one value from a hierarchy — a dropdown whose options are a collapsible tree. Click a folder to expand it; click a leaf to select it. Set searchable to filter the tree as you type. It hydrates into a fully interactive island just like the other select tags.

Use it as {% treeselect %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'treeselect', …).

Basic tree select

The hierarchy comes through data — a JSON array of nested nodes, each an object with a value, a label, and an optional children array of the same shape. Only leaf nodes (those without children) resolve to a selection; clicking a branch just expands or collapses it. clearable shows an × to reset:

Sizes, variants, description, and search

size runs xs–xl; variant is default, filled, or unstyled. description adds helper text below the label, and error shows a validation message. searchable adds a search field that filters the tree as you type:

Data shape

Each node is an object:

{
  "value": "unique-id",
  "label": "Display text",
  "children": [ /* more nodes, optional */ ]
}

value must be unique across the whole tree — it’s what gets selected; label is what the reader sees. A node with no children is a selectable leaf. Unlike the flat select family, treeselect takes only this nested JSON tree, not a comma-separated data list.

With other components

A tree select fits inside a card alongside other content — here a text lead-in above the field:

Attributes

Every attribute is optional; omit one to take its Mantine default. The body is ignored — treeselect is a form control, not a container.

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="TreeSelect"] — or through the Mantine Styles API classes (.mantine-TreeSelect-root and its inner parts):

/* Every rendered TreeSelect carries this island marker */
[data-aardvark-island="TreeSelect"] { }

/* Mantine Styles API class on the root element */
.mantine-TreeSelect-root { }
.mantine-TreeSelect-input { }
.mantine-TreeSelect-label { }
.mantine-TreeSelect-wrapper { }

Injecting Attributes

attr={…} forwards raw HTML attributes straight onto the rendered element. A read-only combobox manages its own click and selection (React state — there’s no native change/click to hook from an inline handler), so attr is best here for a static data-* hook, an id, or ARIA. It lands on the rendered input, where scripts, tests, or DevTools can find it: