Screen · Finance
Send Money SwiftUI Screen
A transfer review with the recipient, a huge amount and a slide-to-send control that commits with a haptic.
A send-money review: the recipient, a giant light-weight amount, the funding account, fees and arrival as blocks, and a slide-to-act control with a following fill, fading label, rubber-banded ends, one armed tick and a checkmark morph with a success haptic on commit.
- SwiftUI
- iOS 17.0+
- swipe-to-confirm
$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 transfer review with recipient, amount, account and fees
- A following fill, fading label and rubber-banded ends
- A checkmark morph and success haptic on commit
- Reset through its binding
In the Build Kit
Send Money (recipe). Your agent builds around this screen in the same design.
Used in
Finance App (template), Travel App (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
Drag the thumb along the track. A tinted fill follows it, the label fades as the thumb covers it, and the ends rubber-band. Cross the threshold and the control arms: a rigid haptic ticks once and the chevron becomes an arrow. Release before it and the thumb springs back; release while armed and it commits: the thumb morphs to a checkmark with .symbolEffect(.replace), the track fills, the label switches to the committed title and a .success haptic fires. isCommitted is a binding, so the host can reset it.
Notes
- States: idle, dragging (thumb 1.06 with a deeper shadow), armed, committed, disabled (0.45 opacity, gestures off).
isDisabledand the environment'sisEnabledboth disable it. - The armed haptic uses a
sensoryFeedbackcondition so it fires only on the false-to-true edge, never when the thumb slides back under the threshold. - The thumb rubber-bands 14pt before the start and 18pt past the end; the fill's width is the thumb's travel plus the inset, so it stays attached during the rubber band.
- VoiceOver treats the control as a single button labeled with the title; activating it commits directly without the drag. The hint reads "Double tap to
<title>". - Reduce Motion uses short ease-outs for the return and commit; the checkmark still replaces the arrow.
- The screen styles the control from the Studio theme through its existing parameters:
tintis the accent (mint on charcoal, black on stone),trackthe surface,thumbInkthe accent's ink andlabelColorthe secondary text. - Commit hands off to the request: the label reads Sending, then the screen becomes the receipt; a failed request resets the binding and shows a retry banner above the control.
SwipeToConfirmExampleinSwipeToConfirm.swiftis the earlier review screen the Finance App template embeds; it is unchanged.SwipeToConfirmScreenExamplein the Example section ofSwipeToConfirm.swiftis the Send Money screen from the preview.
03
Keep building
Pieces that work well next to this one.