Selection And Input
Digit Entry Views
A row of equal-width cells for a verification code, each cell sized to the same height as a standard Text Field.
Findings
What's actually in /ig
- Instagram account verification uses SMS/email confirmation codes, so the digit-entry pattern derives from the confirmed Text Field grammar while splitting the value into equal character cells.
Rationale
Why this component exists
A digit entry view is a Text Field split into equal cells rather than a new control: same 36px height, same border tokens, same focus treatment, just narrowed to one character per cell and gapped by the base unit so the eye reads it as a single code rather than separate fields.
Usage
When to use it
Use when
Collecting a short, fixed-length numeric code — SMS or email verification.
Avoid when
The value is longer than ~8 characters or alphanumeric with no fixed length (use a plain Text Field).
Anatomy
Anatomy
- 01
Cell (one per character)
- 02
Gap between cells
- 03
Active cell focus ring
- 04
Filled cell
Specification
Spacing, colour, type, and motion
- Cell size
- 40×36px, matching Text Field height
- Gap
- 8px (2× base unit)
- Radius
- var(--input-border-radius) — 6px per cell
- Border
- rgb(var(--ig-text-input-border-prism)); focus uses the hover variant
- Type
- system-18 or 22, centered, for legibility at a glance
States
States
| State | Behaviour |
|---|---|
| Empty | Border at resting colour, placeholder caret in the first empty cell. |
| Filled | Digit rendered at system-18/22, cursor advances to next cell automatically. |
| Error | All cells border in rgb(var(--ig-error)) with a single error message below the row. |
Examples
Real interface compositions
Account security
Two-factor login code
Six equal cells accept a pasted SMS code as one logical field, auto-advance visually, and show one shared error message if the code expires.
40x36px cells, 8px gaps, 6px radius, --ig-error error border
Accessibility
Accessibility
- Expose the cell row as a single field to screen readers (one accessible name, one value) rather than N separate unlabeled inputs, and support paste-to-fill across all cells at once.
Do / Don't
Do / Don't
Do
- Auto-advance focus to the next cell on input, matching standard code-entry conventions.
Don’t
- Require manual tabbing between cells — that contradicts the single-field mental model the row presents visually.