The boxes of a one-time code, one character each: the code sent by SMS or e-mail, a two-factor code. Typing a digit fills its box and moves on; pasting the code fills every box; Backspace clears a box and, on an empty one, steps back; the arrows, Home and End move between boxes (DevactionUI.OtpInput hook, logic in text.js).

The boxes have no name: the code goes, joined, into one hidden input (name), which fires input (and change when every box is full) so a form with phx-change hears it. Every box has autocomplete="one-time-code" and a numeric keyboard (inputmode="numeric"), so the phone offers the code it just got, which arrives as one value and is spread over the boxes. numeric false takes letters and digits.

The state is status: :idle (an empty box has a quiet border, a filled one a stronger one, the focused one the ink), :error (red boxes, aria-invalid, and the helper is announced as an alert) or :ok (green boxes). The line under the boxes is the helper attr (2 digits to go), and the line under that, such as Did not arrive? Resend in 0:24, is the resend slot, so the caller draws the countdown and the button. Words are all attrs and slots: label names the group and box_label names each box (Digit %{n} of %{total}).