#CodeInput

A CodeInput is a field for a short code, such as a room code, a redeem code or a PIN. It shows one box for each character.

How to add a code input:

<tb:CodeInput label="Sign-in code" group-size="3" />
<tb:CodeInput label="Room" length="4" characters="LettersAndDigits" upper-case="true" />
<tb:CodeInput label="PIN" length="4" masked="true" />

var room = root.Q<CodeInput>("room");
room.Completed += code => lobby.Join(code);
room.RegisterValueChangedCallback(evt => joinButton.SetEnabled(room.IsComplete));

• A typed character goes into the active box, and the next box becomes active. In a full field, a typed character replaces the last one.
• Backspace empties the active box, or the box before it when the active box is empty, and goes one box back. Delete empties the active box. The later characters move back, so the text has no gaps.
• Left, Right, Home and End move the active box. A click on a box makes it active. A box after the first empty box cannot be active.
• A paste replaces the whole text with the characters that fit, so a copied "482-913" fills six boxes.
• The field is one stop for Tab and for a gamepad. The focus starts at the first empty box.
• On a device with a touch-screen keyboard, a code of digits shows the number pad.
• A masked field gives no text to a copy.
• The groups have equal sizes. A code with groups of different sizes is not supported.

Tips:

• Use Completed to check the code at once. The user needs no button.
• Use value = "" to empty the boxes after a wrong code, and show the reason with a field error.
• For a text with fixed characters in it, such as a phone number, use a MaskedTextBox.

#Styling

The rules are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/Controls.uss.

To make the boxes larger and join them:

.tb-code-input__slot { width: 40px; height: 48px; margin: 0; border-radius: 0; }