Screen · Account

Verify SwiftUI Screen

A sign-in verification screen with springing digits, SMS autofill and a shake on a wrong code.

A two-step verification screen: a heavy two-tone headline, the masked phone number, one-time-code entry with a blinking caret, digits that land with a spring, a sequential success tint, a shake-then-clear error, SMS autofill, paste detection and a resend countdown.

  • SwiftUI
  • iOS 17.0+
  • code-entry
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A complete verification screen with resend countdown
  • A blinking caret, with digits that land on a spring
  • A sequential success tint and a shake-then-clear error
  • SMS autofill and paste detection

In the Build Kit

Send Money (recipe). Your agent builds around this screen in the same design.

Used in

Travel App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

A hidden TextField with .oneTimeCode content type receives SMS autofill and keyboard input; the visible boxes mirror it. The active box shows a blinking caret, each digit lands with a small scale spring, and the row reports complete with a soft haptic once the last digit is in. Drive status from your verification: verifying dims the boxes under a spinner, success tints them green one by one with a success haptic, and error shakes the row, clears the digits last to first, and hands status back to idle with focus restored.

Notes

  • States: entering, complete, verifying, success, error. status is a binding so the field can return .error to .idle after the clear; leave it .constant(.idle) if you only need entry.
  • Paste is offered with the system PasteButton only when the clipboard holds a number, detected with UIPasteboard.detectPatterns, which never reads the contents or shows the paste banner. The pasted text is scanned for the first run of exactly length digits.
  • VoiceOver focuses the real text field; its value reads the count and the entered digits, and its hint tracks the state. The boxes are hidden from VoiceOver.
  • Reduce Motion keeps the caret solid and crossfades digits instead of scaling them.
  • The screen reads the Graphic theme: an orange header block with a cropped dot matrix and a two-tone title, the number as a lemon block, and boxes that fill mint with dark digits through successColor and successInk.
  • The resend block is disabled while its black dial counts down, then becomes a button; three misses ask for a new code, and the keyboard covers the bottom actions instead of pushing them over the boxes.
  • CodeEntryExample at the end of CodeEntry.swift is the Verify screen from the preview.