# 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.

Kit part · With the Kit · https://tactileui.dev/parts/tumbler

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

One custom element around a real input, which lies transparent over the wheels and takes every key, paste and autofill. Each wheel is an eleven-flat drum, a blank then 0–9 (letters ride the same drum past the window), drawn as five flats round the read line, each placed by its angle alone. The light is a separate fixed layer over the drum: occlusion under the slot’s walls, a band of the room’s brightness above the read line and the dark floor below it (chrome in aluminium, anodised black in graphite) so the figures pass through the reflection and it never turns with them. The slot’s walls are drawn over the wheels, so the upper wall shades their tops. The locking bar and its teeth rest on the rims. A wrong code shakes the bank, then unwinds every wheel downward to blank, right to left.

## Variants

- 4 digits · a device PIN
- 6 digits · a sign-in code
- 8 characters · letters and digits
- Large · the page’s one question
- Right · the bar is down
- Wrong · spun back to blank
- Disabled · too many tries

## States

- Empty
- Filling
- Focus
- Complete
- Checking
- Right
- Wrong
- Not checked
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| length | attribute | How many wheels. 6 and 8 are printed in two groups. |
| charset | attribute | Digits, or digits and A–Z (typed letters are upper-cased; the phone shows its letter keyboard). |
| label | attribute | An aria-label for the input when no names it. |
| data-rest · data-short | attribute | The words beside the lamp at rest, and when Enter is pressed early. |
| data-checking · data-right · data-wrong · data-error | attribute | The words for each outcome. A failed check adds its reason: “Could not check the code: meter not answering”. |
| data-state | attribute | Where it is. Written by the part; set it in markup only to show a state. |
| data-why | attribute | Why the check failed, from the rejection’s message. |
| input · change | event | input on every change to the code; change when a turned wheel settles (and natively on blur). |
| complete | event | Every wheel is set. |
| verify | event | After typing, paste or autofill completes the code, and on Enter. Hand wait() the check; hand it nothing and Enter submits the form. |
| 0–9 · A–Z | keyboard | Fills the wheel at the cursor and moves on, overwriting as a lock does. Anything else is ignored. |
| Paste · autofill | keyboard | Fills every wheel from the start. |
| Backspace · Delete | keyboard | Clear back (or forward); the wheels after it move up. |
| ← → · Home · End | keyboard | Move between wheels. The cursor’s wheel is marked with a printed bar while focused. |
| ↑ · ↓ | keyboard | Turn the cursor’s wheel. Turning never checks by itself; Enter does. |
| Enter | keyboard | Fires verify when every wheel is set; says what is missing otherwise. |
| Drag · wheel | pointer | Drag a wheel up or down, or scroll over it while the lock has focus. A click puts the cursor on it. |

## Usage notes

Paste K7Q2-M9XD as the recovery code.

## Accessibility

- One labelled text input, not a spinbutton per wheel. A screen reader meets one edit field (“Sign-in code, 6 digits”) and hears each character as it is typed, instead of six stops.
- 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.
- Keyboard: type or paste into the field. ↑ and ↓ turn the wheel the cursor is on. Enter with the lock not full says how many are missing and does not submit; with it full, Enter asks for the check, and the form submits only when nothing is checking it. While checking and once right, Enter does nothing.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Sign-in](https://tactileui.dev/parts/sign-in): Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.
- [Commit key](https://tactileui.dev/parts/commit): A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.