SegmentedControl

The built-in segmentedcontrol tag — a row of mutually exclusive options. Usage, the data list, defaultValue, colors, sizes, orientation, full width, and live examples.

A segmented control — a row of mutually exclusive options, like a compact set of tabs. Give data a comma-separated list of labels (or a JSON array of {label, value} objects), and pick the starting option with defaultValue. The control is interactive, so readers can switch between segments.

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

The data list and default value

data is a comma-separated list of labels; defaultValue is the one selected on load.

From Python you can pass data as a real list of strings or {label, value} dicts — handy when building it in a loop:

Separate label and value

When the value you store differs from the label, pass a JSON array of {label, value} objects.

Colors, sizes, and radius

color tints the active indicator; size is xs–xl; radius rounds the track.

Full width, orientation, and states

fullWidth stretches to the container; orientation='vertical' stacks the segments; disabled greys it out; readOnly shows a selection the reader can’t change; withItemsBorders=false drops the dividers between segments.

With other components

Pair a segmented control with a heading and a button to build a small view-switcher row.

Choose a view

Attributes

Omit any attribute to take its Mantine default.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-SegmentedControl-root { }
.mantine-SegmentedControl-control { }
.mantine-SegmentedControl-label { }

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 selecting a segment logs the active value to the console and alerts it: