Inputs · §5.4

Visit-code input

8 or 10 Crockford characters in two mono groups.

Profile

State

Theme

Contrast

Language

Motion

Text size

Visit code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

8 characters, on your visit card

Code

<VisitCodeInput onValueChange={setCode} profile="standard" t={t} value={code} />

Accessibility

One accessible input announced as "Visit code, 8 characters".
No one-time-code autocomplete (it isn't an SMS code).

Usage

Accept lowercase and lookalikes (O→0, I/L→1).

Don't

Never shake on error.

Platforms

Web: apps/web/components/edflow/visit-code-input.tsx, apps/web/components/ui/input-otp.tsx
iOS: SwiftUI TextField with cells
Android: Compose BasicTextField with cells