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.
Interactive Reference
Live showroom
Need the full visual surface?
Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().
Best for exploring:
variants, states, categories, and real app examples in one place.
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.