Skip to the page
Tactile UI Kit

Tumbler lock

A PIN or one-time code dialled into a combination lock: number wheels behind a slot in the plate, turning on detents. Right, a locking bar drops into their notches; wrong, they spin back to blank.

Type 424242 to approve the deploy; any other code is refused and spins back. ↑/↓, the mouse wheel or a drag turns one wheel. The meter answers on the second try (PIN 0451). Paste K7Q2-M9XD as the recovery code.

  • One labelled text input, not a spinbutton per wheel: SMS autofill, WebOTP and password managers fill a single autocomplete="one-time-code" field, and paste lands whole; split into six they fill the first box or nothing. A screen reader meets one edit field — “Sign-in code, 6 digits” — and hears each character as it is typed, instead of six stops.
  • The wheels, the bar and the notches are the input’s picture (aria-hidden). ↑/↓ turning a wheel is an extra; typing does everything.
  • The lamp always has words beside it, in a polite live region the input points to with aria-describedby: “Checking…”, “Code accepted”, “That code didn’t match. Type it again.” A wrong code sets aria-invalid until the next character.
  • While checking and once right the input is read-only, not disabled, so focus stays on it. A required lock that is not full says how many are missing as its validity message.
  • Reduced motion drops the rolling, the shake, the drop and the settle: the wheels jump to their characters, the bar is down or up, the lamp and the words carry every state.
Tactile UI Kit
Get the Founder Pass