Props & events

Attributes & behavior classes

The meridiem buttons need no class of their own — their selected look is driven purely by aria-pressed, which flickui.js toggles for you on click, keeping only one true at a time. Include aria-label="Hour"/"Minute" so flickui.js clamps each field to the correct range regardless of markup order.

Attribute / classPurpose
aria-label (on each field)Describes the field and tells flickui.js which range to clamp it to, e.g. "Hour" / "Minute"
inputmode="numeric"Requests a numeric keyboard on touch devices
maxlength="2"Caps each field to two digits
aria-pressed (on meridiem buttons)Marks which of AM/PM is currently active — managed by flickui.js

Events

Arrow Up/Down increments/decrements the focused field with wraparound; leaving a field clamps and zero-pads it into range.

EventDescription
flick:changeFired on field edit, arrow-key change, or meridiem toggle; detail carries { hour, minute, meridiem }.