inputs/DSOTPField
DSOTPField
inputs6-digit one-time password input with individual digit boxes, auto-advance, and paste support.
iOS 17+macOS 14+
Purpose
Two-factor authentication, email/SMS verification codes, and PIN entry.
States
empty
All boxes unfilled.
filling
Active box highlighted with primary border.
complete
All 6 digits entered. Success tint.
error
Red tint on all boxes with shake animation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| codereq | Binding<String> | — | Bound 6-character code string. |
| length | Int | 6 | Number of digit boxes. |
| isSecure | Bool | false | Masks digits like a password. |
| isError | Bool | false | Triggers error state with shake. |
| onComplete | ((String) -> Void)? | nil | Called when all digits are filled. |
Examples
2FA verification
OTP screen after login.
swift
DSOTPField(code: $verificationCode) { code in
viewModel.verify(code)
}Usage Guidelines
- Auto-submit when the last digit is entered — do not require a separate button tap.
- Support paste from clipboard automatically.
- Always show a resend timer after the first code is sent.