Screen · Account

Verify

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.

SwiftUIiOS 17.0+code-entry

Get Swift Pieces Pro

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

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)

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.

Keep building

Pieces that work well next to this one.

Screen · Onboarding

Onboarding

First run end to end: welcome pages, a permission step and a trial offer, then into the app.

Screen · Finance

Send Money

A transfer review with the recipient, a huge amount and a slide-to-send control that commits with a haptic.

Screen · Account

Settings

A settings home with a collapsing profile header, grouped rows, toggles and sign out.

Verify

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

SwiftUIiOS 17.0+code-entry

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.