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
$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.
statusis a binding so the field can return.errorto.idleafter the clear; leave it.constant(.idle)if you only need entry. - Paste is offered with the system
PasteButtononly when the clipboard holds a number, detected withUIPasteboard.detectPatterns, which never reads the contents or shows the paste banner. The pasted text is scanned for the first run of exactlylengthdigits. - 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
successColorandsuccessInk. - 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.
CodeEntryExampleat the end ofCodeEntry.swiftis the Verify screen from the preview.
03
Keep building
Pieces that work well next to this one.