Time field ~60px with a visible t.mm hint

time-field-60px-hint-tmm-always-visible

Time field is fixed ~60px; hint `t.mm` always visible; component normalises to Finnish time — not placeholder-only format. Dual-cite USWDS time picker increments. Placeholder/label lock: format is not only in a placeholder.

Description

Suomi.fi time fields are fixed around 60px wide, keep a `t.mm` hint always visible, and normalize values to Finnish time. Format must not live only in a placeholder (placeholder/label lock). Dual-cite USWDS time picker increments for related timing patterns. A placeholder-only format or a much wider field without the lasting hint fails the pattern and hides the expected shape while typing.

When to use

Building Suomi.fi time inputs that normalize to Finnish time.

Not when

Format living only in a placeholder, or oversized time fields with no lasting hint.

Agent hint

Keep the time field ~60px with a lasting t.mm hint; do not rely on placeholder-only format.

Pass

Time input is ~60px wide; `t.mm` hint is always visible; value is normalised to Finnish time.

Fail

Time format lives only in a placeholder; field is far wider than the named ~60px with no always-visible hint.

Citations

Suomi.fi — TimeInput

https://designsystem.suomi.fi/components/timeinput/