Chip
The built-in chip tag — a checkbox or radio styled as a selectable pill. Usage, options, variants, colors, sizes, types, and live examples.
A chip — a checkbox or radio styled as a selectable pill. The label is the block body
or the text attribute, and the chip is interactive — readers can toggle it. Add
defaultChecked to start it selected, and pick type (checkbox or radio).
Use it as {% chip %} in Markdown, or call it from Python logic
(loops, snippets) via component('aardvark', 'chip', …).
Label and default state
The label is the block body or the text attribute. defaultChecked starts it
selected.
{% chip %}React{% endChip %}
{% chip defaultChecked=true color='grape' %}Selected{% endChip %}
{% chip text='Vue' %}
component('aardvark', 'chip', children='React')
component('aardvark', 'chip', defaultChecked=True, color='grape', children='Selected')
component('aardvark', 'chip', text='Vue')
In a loop, render a row of chips from data:
for tag in ['React', 'Vue', 'Svelte']:
component('aardvark', 'chip', children=tag)
Variants
variant is filled (default), light, or outline.
{% chip defaultChecked=true %}filled{% endChip %}
{% chip variant='light' defaultChecked=true %}light{% endChip %}
{% chip variant='outline' defaultChecked=true %}outline{% endChip %}
component('aardvark', 'chip', defaultChecked=True, children='filled')
component('aardvark', 'chip', variant='light', defaultChecked=True, children='light')
component('aardvark', 'chip', variant='outline', defaultChecked=True, children='outline')
Colors, sizes, and radius
color is any theme color; size is xs–xl; radius rounds the pill.
{% chip color='green' defaultChecked=true %}green{% endChip %}
{% chip color='orange' defaultChecked=true %}orange{% endChip %}
{% chip size='lg' defaultChecked=true %}large{% endChip %}
{% chip radius='sm' defaultChecked=true %}less round{% endChip %}
component('aardvark', 'chip', color='green', defaultChecked=True, children='green')
component('aardvark', 'chip', color='orange', defaultChecked=True, children='orange')
component('aardvark', 'chip', size='lg', defaultChecked=True, children='large')
component('aardvark', 'chip', radius='sm', defaultChecked=True, children='less round')
Type and disabled
type='radio' renders the chip’s hidden control as a radio rather than a checkbox;
disabled makes it non-interactive.
{% chip type='radio' defaultChecked=true %}radio chip{% endChip %}
{% chip disabled=true %}disabled{% endChip %}
{% chip disabled=true defaultChecked=true %}disabled, selected{% endChip %}
component('aardvark', 'chip', type='radio', defaultChecked=True, children='radio chip')
component('aardvark', 'chip', disabled=True, children='disabled')
component('aardvark', 'chip', disabled=True, defaultChecked=True,
children='disabled, selected')
With other components
Combine chips with a heading and a button to build a small filter row.
Filter by framework
Filter by framework
{% chip defaultChecked=true %}React{% endChip %}
{% chip %}Vue{% endChip %}
{% chip %}Svelte{% endChip %}
{% button %}Apply{% endButton %}
component('aardvark', 'chip', defaultChecked=True, children='React')
component('aardvark', 'chip', children='Vue')
component('aardvark', 'chip', children='Svelte')
component('aardvark', 'button', children='Apply')
Attributes
Omit any attribute to take its Mantine default.
| Attribute | Valid values | Description |
|---|---|---|
text |
string | The label, when not using the block body. Plain text — Markdown is not rendered, and HTML in it is escaped. |
variant |
filled (default), light, outline |
Visual style of the pill. |
color |
theme color name (blue, green, …) |
Fill / accent color when selected. |
size |
xs, sm, md, lg, xl |
Overall size. |
radius |
xs, sm, md, lg, xl (or any CSS value) |
Corner rounding of the pill. |
type |
checkbox (default), radio |
Whether the chip’s hidden control is a checkbox or a radio. |
defaultChecked |
bare flag (true) |
Start the chip selected. It stays interactive — the reader can toggle it. |
disabled |
bare flag (true) |
Render non-interactive. |
autoContrast |
bare flag (true) |
Auto-pick a readable label color against color. |
attr |
dict (attr={…}) |
Raw HTML attributes (e.g. onchange) set on the chip’s hidden <input>. |
Every chip toggles on its own — including type='radio' ones. Mantine makes a set mutually
exclusive through a chip group, which a tag can’t declare, so a row of radio chips is a row of
independent toggles rather than a one-of-many picker. For a genuine pick-one control, use
SegmentedControl or
Radio, whose name groups the buttons.
Every chip toggles on its own — including type='radio' ones. Mantine makes a set mutually
exclusive through a chip group, which a tag can’t declare, so a row of radio chips is a row of
independent toggles rather than a one-of-many picker. For a genuine pick-one control, use
SegmentedControl or
Radio, whose name groups the buttons.
CSS Selectors
Target a {% chip %} from your own CSS with the island data attribute or the Mantine Styles API part classes:
/* Every Chip instance on the page */
[data-aardvark-island="Chip"] { }
/* Mantine Styles API parts */
.mantine-Chip-root { }
.mantine-Chip-label { }
.mantine-Chip-input { }
Injecting Attributes
Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the chip’s hidden input. Here it is wired to onchange, so toggling the pill logs its checked state to the console and alerts it — this inside the handler is that input, so this.checked is the state the reader just set:
{% chip attr={'onchange': '''
const value = this.checked;
console.log('attr demo value:', value);
alert(value);
'''} %}React{% endChip %}
component('aardvark', 'chip', children='React', attr={'onchange': '''
const value = this.checked;
console.log('attr demo value:', value);
alert(value);
'''})