Keyboard interaction

KeyAction
Digits or lettersFill the current slot and move to the next.
BackspaceDeletes the character before the caret.
Left and right arrowsMove one slot; a filled slot is selected, so typing replaces it.
PasteFills the slots from a copied code.

Accessibility notes

  • Screen readers meet one text field. Label it with aria-label or a <label>.
  • The slots are hidden from assistive technology; the slot being edited shows the focus ring.
  • Under reduced motion the caret doesn’t blink and the slots don’t hop or shake.