NativeSelect

The built-in nativeselect tag — a native HTML select styled like the other inputs, built from a delimited option list.

A built-in tag for a native HTML <select> styled to match the rest of your form. It uses the same Input wrapper as TextInput, so it carries a label, description, and error message, and builds its options from a data string. Because it renders the browser’s native control, it is the lightest, most accessible way to offer a fixed list of choices.

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

Options from data

The options come from data — a |- or comma-delimited string. Each option is trimmed.

Delimiters

Comma-delimited works too. When you use |, an option label may itself contain a comma.

Pre-select and state

defaultValue pre-selects an option; required (or withAsterisk) adds the asterisk; error shows a validation message and switches the field to the error color.

Variant, size, radius, and sections

variant is default, filled, or unstyled; size and radius take xs–xl; leftSection and rightSection put text inside the field; disabled renders it inert.

With other components

Group a select with other fields inside a fieldset.

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

Target a {% nativeselect %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

/* Every NativeSelect instance on the page */
[data-aardvark-island="NativeSelect"] { }

/* Mantine Styles API parts */
.mantine-NativeSelect-root { }
.mantine-NativeSelect-input { }
.mantine-NativeSelect-section { }

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Here it is wired to onchange, so changing the field logs its new value to the console and alerts it: