Skip to the page
Tactile UI Kit

Onboarding

Setting something up: stations along a groove — done ones with their lamp lit, the current one a raised cap — and a checklist of check keys with a progress slot.

Step the track with Back and Next: ink runs along the groove and the lamps light behind you. Tick tasks off: the count, the slot and the next key follow.

  • The track is an ordered list with aria-current="step" on where you are, and each station says “done”, “current step” or “to do” in words.
  • Done is a lit lamp and the word; current is a raised cap and aria-current: never the lamp alone.
  • Tasks are real checkboxes with labels; the progress slot is a progressbar whose value follows them.
  • Only the next task shows its key, so there is one contrast key on the surface and one obvious thing to do.
  • Reduced motion stops the ink running along the groove; the track shows the same.
Tactile UI Kit
Get the Founder Pass