CUI

Components / Inputs

One time code

A row of boxes for a verification code, filled by typing or pasting.

Functions: cui_otp_input

One time code

Usage

static char code[7];                        /* length + 1 */
if (cui_otp_input(ui, "code", code, 6)) verify(code);   /* true once when complete */

Type or paste: letters and digits fill the boxes in order, anything else is ignored. Backspace removes the last character.

Returns true once, on the frame the last box is filled, and again only after a character was removed and the code completed anew. code is your buffer of length + 1 bytes, zero terminated; start it empty, as a static array is. The library writes the characters as they were typed, without changing their case. To clear the boxes after a wrong code, set code[0] = 0. length is the number of boxes, at most 12, and codes of six or more get a gap in the middle. The boxes are 44 points wide and shrink to 30 in a narrow container.

Keyboard

  • Backspace removes the last character.
  • Tab focuses the boxes as one field. Backspace removes the last character and Esc leaves the field.

Related

  • Password strength: A meter under a password field that scores the password from too short to strong.
  • Tag input: A field that turns typed words into removable chips, kept as a comma separated list.
  • Inline edit: Text that turns into a field when clicked, for renaming things in place.
  • Number field: A field for a number in a range, typed or stepped with its buttons and the arrow keys.