# Code input

Code input: a free component, built on your design tokens, to use for a one-time sign-in or verification code. Six boxes for a verification code that move to the next box as you type and fill all at once when you paste, with a resend countdown and a wrong-code error.

Prompt: Add the OpenDesigner component code-input to this project: https://opendesigner.dev/library/r/code-input.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, filled, error, resend waiting, resend ready, disabled verify.

Accessibility: The boxes are a labelled group, each input says which digit it is and points to the message, arrows and Backspace move between boxes, the first box offers one-time-code autofill, and the message is a polite live region.

File: https://opendesigner.dev/library/r/code-input.html