Showcase index
Actions
Forms
Feedback
Content
Fields
Text inputs, groups with addons, selects, the searchable select and the four validation states.
Inputs
Text fields over the lens ink, without the click shadows: a field is a writing surface.
Input groups
The field welded to addons and buttons as a single piece. The addon is a fixed label; when a click is needed, a button takes its place.
Selects
The native select with the same ink as the inputs, and the disabled state beside it.
Searchable select
An input with a datalist: the browser filters as you type, without a line of JS. The list is drawn by the system, so it does not follow the theme, and the value is free text.
Field states
The four state classes, in the intent colors. The border is a supporting signal: the written message stays mandatory, because color alone does not communicate.
v-model="email"v-model="email"v-model="nickname"v-model="company"Field scale
The same controls in sm, md and lg. The height is a single token (--field-h), which is why input, select, calendar and phone all land on the same line at any size.
--sm
md
--lg
Date, time and colour pickers
One picker for all three time questions — date, time and date with time — in the same system panel, with direct month and year navigation. The native date input appears nowhere in the template; colour is the only picker still drawn by the device.
Phone and birthday
The two fields a plain input cannot carry. A phone number needs its country stated — the same number written four ways is not dialable — and a birthday has to start at the YEAR: a calendar opening on the current month is the worst place to look for 1980.
Tags input
Chips inside a field. Enter confirms and Backspace on an empty field deletes the last one: the two gestures anyone using this control already expects.
Duplicates are ignored, and every tag has a labeled remove button.