FORMS
OTP Input | Ripple
A six-box one-time-code field where the borders react to typing: each keystroke nudges the box outline, correct codes sweep a staggered accent wave across the row, and a wrong code answers with a red double-pulse and a shake. Validation is declarative: hand it a check function and it runs the whole choreography itself.
DEMO
Enter verification code
Type or paste 123456 for the success wave; anything else triggers the red double-pulse and shake. Tune it live in the DialKit panel.
PROPS
| PROP | TYPE | DEFAULT | VALUES |
|---|---|---|---|
| length | number | 6 | 4 – 8 |
| mode | select | numeric | "numeric" | "alphanumeric" |
| masked | boolean | false | - |
| rippleOnType | boolean | false | - |
| pendingRing | boolean | false | - |
| caretColor | string | #5B6BFF | - |
| caretShape | select | bar | "bar" | "block" | "underscore" |
| staggerMs | number | 70 | 30 – 200 |
| maxAmplitude | number | 5 | 3 – 12 |
| bumpWidth | number | 0.1 | 0.05 – 0.25 |
| decay | number | 0.06 | 0.02 – 0.2 |
| radius | number | 14 | 4 – 22 |
| strokeWidth | number | 1.5 | 1 – 3 |
| shakeDistance | number | 6 | 2 – 14 |
| validate | function | undefined | - |
| onSuccess | function | undefined | - |
| onFailure | function | undefined | - |
| onComplete | function | undefined | - |
| onChange | function | undefined | - |
| value | string | undefined | - |
| autoClearOnFailure | boolean | true | - |
| disabled | boolean | false | - |
| autoFocus | boolean | false | - |
| label | string | One-time password | - |
Design decisions taken here
- ✓Validation is a prop, not a wrapper: pass a function returning a boolean or a promise, and the field handles the pending ring plus the success or failure choreography before firing your callbacks.
- ✓Paste and SMS autofill both fill every box from the first, so the code arrives the way phones actually deliver it.
- ✓Three caret shapes: the bar keeps the native caret with your color; block and underscore draw a fake caret that resets to solid on every keystroke like a real one.
- ✓Works controlled or uncontrolled, so it drops into forms of either persuasion.
- ✓The failure shake is plain CSS with its distance exposed as a custom property, so the install stays copy-paste simple.
- ✓Screen readers get a labelled group with live announcements for checking, accepted and incorrect states.
- ✓Honors prefers-reduced-motion: ripples collapse into instant color states and the shake is skipped.