TimeInput
The built-in timeinput tag — a time field built on the browser's native time control. Usage, the string value, and a live example.
A time field built on the browser’s native <input type="time">, dressed in the Mantine Input
wrapper. Reach for it for a plain time entry (a meeting start, an alarm). It hydrates into an
interactive island.
Use it as {% timeinput %} in Markdown, or call it from Python logic
(loops, snippets) via component('aardvark', 'timeinput', …).
The value is a time string — HH:mm (or HH:mm:ss with withSeconds).
The value is a time string — HH:mm (or HH:mm:ss with withSeconds).
A time field
withSeconds adds the seconds field; the usual Input wrapper props apply.
24-hour clock
{% timeinput label='Stand-up' defaultValue='09:30' description='24-hour clock' %}
{% timeinput label='Precise start' defaultValue='09:30:15' withSeconds=true %}
component('aardvark', 'timeinput', label='Stand-up', defaultValue='09:30',
description='24-hour clock')
component('aardvark', 'timeinput', label='Precise start',
defaultValue='09:30:15', withSeconds=True)
Attributes
Omit any attribute to take its Mantine default.
| Attribute | Valid values | Description |
|---|---|---|
defaultValue |
HH:mm string (or HH:mm:ss with withSeconds) |
Initial value. |
withSeconds |
bool (true / false) |
Show and capture seconds. |
label |
string | Field label above the input. |
description |
string | Helper text below the label. |
error |
string | Validation message; switches the field to the error color. |
size |
xs, sm, md, lg, xl |
Control size. |
radius |
xs–xl or a CSS length |
Corner radius. |
variant |
default, filled, unstyled |
Input style. |
required |
bool (true / false) |
Mark required and add the asterisk. |
withAsterisk |
bool (true / false) |
Add the asterisk without the HTML required. |
disabled |
bool (true / false) |
Render the field disabled. |
CSS Selectors
Target a {% timeinput %} from your own CSS with the island data attribute or the Mantine Styles API part classes:
/* Every TimeInput instance on the page */
[data-aardvark-island="TimeInput"] { }
/* Mantine Styles API parts */
.mantine-TimeInput-root { }
.mantine-TimeInput-input { }
.mantine-TimeInput-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 changing the field logs its new value to the console and alerts it:
24-hour clock
{% timeinput label='Stand-up' defaultValue='09:30' description='24-hour clock' attr={'onchange': '''
const value = this.value;
console.log('attr demo value:', value);
alert(value);
'''} %}
component('aardvark', 'timeinput', label='Stand-up', defaultValue='09:30', description='24-hour clock', attr={'onchange': '''
const value = this.value;
console.log('attr demo value:', value);
alert(value);
'''})