AurumOtpInput

Aurum's OTP (one-time password) input — the SwiftUI port of aurum-android's AurumOtpInput.

familyFields
platformiOS 17+ · SwiftUI
figmacomponent master ↗
sourceSources/Aurum/Component/Field/AurumOtpInput.swift
code connectFigmaConnect/Sources/AurumFigmaConnect/AurumOtpInput.figma.swift

Aurum's OTP (one-time password) input — the SwiftUI port of aurum-android's AurumOtpInput.

Renders a row of underline-style digit cells that fill sequentially. A single invisible TextField captures keyboard input (numeric keypad, oneTimeCode content type so SMS autofill works); the visible cells are decorative columns (digit + coloured underline bar). The active cell's brand underline is the sole caret cue.

Intended use

Use whenever the user must enter a numeric one-time password — login OTP, payment authorisation, transaction confirmation. The cell count (.four or .six) should match the OTP length your backend issues. Don't compose digit cells from AurumTextField — this component already handles paste, autofill, and resend-timer UX.

Do

  • Use validationState: .error together with a meaningful helperText to guide retries — never silently mark the OTP wrong.
  • Track resend countdown with validationState: .timer so the helper colour reflects the wait state without changing layout.
  • Hook onComplete to auto-submit when all cells are filled — saves the user a tap.

Don’t

  • Feed non-digit characters into the binding; input is filtered to digits and behaviour is undefined otherwise.
  • Render multiple OTP inputs on one screen — there's only ever one active OTP context.
  • Use this for non-numeric verification (e.g. invitation codes); use AurumTextField instead.

Code Connect

Mapped to Figma node 4975:1630 ↗ — SwiftUI snippets appear in Dev Mode for the latest release.