OtpInput

@/components/ui/OtpInput

Engangskodefeltet fra innloggings- og registreringsflytene — hopper til store, sperrede sifre idet feltet får innhold.

Når brukes den

Engangskode (OTP) i innlogging og registrering — eneste sted i systemet dette trengs i dag.
`inputMode="numeric"` og `autoComplete="one-time-code"` er alltid satt, så mobilens kode-forslag fungerer.
Ikke bruk som en generell `Input`-variant: ATFERDEN (typografien bytter med INNHOLD, ikke en prop) er unik for akkurat dette feltet.

Tom

Startpunktet — vanlig feltstørrelse med plassholderteksten «Skriv inn koden».

Utfylt

Idet feltet får innhold hopper sifrene til 22px, halvfet og sperret (0,35em) — leselig på avstand.

<OtpInput verdi={verdi} onChange={setVerdi} />

Feil

Rød kant — samme signal som Input/Select sin `error`-prop, for en kode som ikke ble godtatt.

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

verdi *

string

—

Kontrollert verdi.

onChange *

(verdi: string) => void

—

Kalles med tall-rensket, lengdebegrenset verdi.

lengde

number

Maks antall sifre.

feil

boolean

—

Rød kant — samme signal som Input/Select sin `error`-prop.

className

string

—

Ekstra klasser på selve inputfeltet.

regel/typografi-via-type-klasser