Field

#Usage

Use the field (.field) for free text: your name on Home, the older long recovery code, and the word lookup ("Is it a word?").

Use the code field (.field.code) to type a host's 4-letter room code in the Join a game sheet.

Use the code tiles (.rc-type) for the six-character recovery code. The six tiles are the field: you tap them and type.

Don't put a code you show in a field. A room's own code, the one the host reads out, is open display text (54px, +14px tracking), never boxed. Your recovery code is shown as tiles and copied by tapping it.

Don't block with the field. Guide, don't block: keep the buttons enabled, and when something is missing, focus the field and say what it needs.

#Anatomy

The code tiles. A panel of six tiles in two groups of three, with a real input laid invisibly over them.

#States

The field itself never changes colour on error; the message does the work. The code tiles are the exception: their edges turn rose.

#Behaviour

• Errors clear as you type. Any change to the field removes its error.
• The name is checked when you leave the field, and again before anything that banks (Join a game, Create game and the Compete cards): if it's missing or invalid, the field takes focus, scrolls into view and says why. Blocked words are caught as you type.
• The room code is checked when you tap Join: it must be 4 letters, then a game that exists, hasn't started and isn't full.
• Tap anywhere on the code panel to type. The panel is a <label> for the hidden input, so the keyboard, paste and autofill all work. Enter tries the code.
• Find my account stays tappable. It looks soft until six characters are in; tapping it early focuses the tiles and, if anything is typed, says "Your code has six characters."
• Long codes switch over. Pasting an older word-word-id code into the tiles swaps to a plain field, and "Use a six-character code" swaps back.
• Five misses an hour, then "Too many tries. Wait a little and try again."
• Errors don't shake. A wrong code turns the tiles rose, with plain words under them. No movement.

#Accessibility

• Text you type is at least 16px. The hidden recovery input is 16px so iOS doesn't zoom when it takes focus.
• Labels: the name field has a visible label ("Your name"), the long-code field "Your code", and the tile input an aria-label ("Your six-character code"); the tiles themselves are aria-hidden. The room code field and the word lookup have only a placeholder. See Known issues.
• The hint under the tiles is a status region. Error messages aren't, and they aren't linked to their field. See Known issues.
• Keyboards: the code fields turn autocorrect off; the recovery input asks for capitals and offers one-time-code autofill.
• Reduced motion: the caret stops blinking.

#Content

• The hint says what the field is for: "Spell it out and watch it land on the board.", "Get the 4-letter code from your host.", "Paste works too."
• Errors say what's wrong and what to do, and never apologise. Verbatim:

#Why it's built this way

#Known issues and gaps

• The Join button is off until something is typed, and so is the word lookup's Check button, against "guide, don't block".
• Two fields have no label. The room code field ("CODE") and the word lookup ("type it") rely on their placeholders.
• Errors aren't announced and aren't linked to their field (aria-describedby); on the recovery tiles the status region empties when an error appears.
• The validation timing is documented wrong. The long reference page says fields validate on submit, never while typing. In the code the name is checked when the field loses focus, and blocked words are caught as you type.
• The field CSS reads legacy names (--tray-raise, --tray-line, --paper, --paper-dim, --error-text, --error-surface, --error-border); they resolve to the canonical roles.

#Related

• Recovery: the code sheet, saving and getting back in
• D-010, short recovery codes, shown as tiles
• Button: guide, don't block, from the button's side
• Sheet: where the room code and recovery fields live
• Color: rose means refused

#Changelog