ColorInput

The built-in colorinput tag — a text input with a color swatch and dropdown picker. Usage, formats, swatches, options, and live examples.

A built-in tag for a color input — a text field with a color swatch and a dropdown color picker. It ships with aardvark, so it’s a single tag with no setup. Give it a label, a format (how the value reads back), and an optional defaultValue; the reader can type a value, pick from the dropdown, or use the eye-dropper.

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

Demonstrations

Basic input

Add a label, a format, and an optional defaultValue. Click the swatch to open the picker.

Brand color

Source: Markdown

Source: Python

Description and placeholder

description adds helper text under the label, and placeholder fills the empty field.

Accent color

Used for links and buttons

Source: Markdown

Source: Python

Preset swatches

Pass swatches as a comma-separated list of colors to offer presets under the picker.

Pick a preset

Source: Markdown

Source: Python

Formats, pick-only, and sizes

The format controls how the value reads back — including the *a formats with alpha. Add disallowInput for a pick-only field (no typing), disabled for a read-only one, and size / radius (xs–xl) to scale it.

RGBA

Pick only

Disabled

Source: Markdown

Source: Python

With other components

Generate one color input per brand token from data with a Python loop — the same component('aardvark', 'colorinput', …) call, once per item, laid out in a card grid.

Primary

Success

Warning

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Values	Description
`label`	string	Field label.
`description`	string	Helper text below the label.
`placeholder`	string	Placeholder text for the empty field.
`defaultValue`	string	Starting color (matching the `format`).
`format`	`hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`	How the value reads back; the `*a` formats add an alpha channel.
`swatches`	comma-separated colors	Preset swatches shown under the picker (e.g. `'#fa5252, #228be6'`).
`size`	`xs`–`xl`	Field size.
`radius`	`xs`–`xl`	Corner rounding of the field.
`withPicker`	boolean	Show the dropdown picker (on by default; set `false` for swatch/text only).
`disallowInput`	boolean	Pick-only — disable typing into the field.
`withEyeDropper`	boolean	Show the eye-dropper button (on by default, where the browser supports it).
`disabled`	boolean	Make the field read-only.
`attr`	raw-HTML map	Extra HTML attributes, passed as `attr={…}`.

CSS Selectors

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

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

/* Mantine Styles API parts */
.mantine-ColorInput-root { }
.mantine-ColorInput-input { }
.mantine-ColorInput-colorPreview { }

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:

Brand color

Source: Markdown

Source: Python