DUOTP
FormsOne-time passcode / PIN digit inputs.
import { DUOTP, DUPinInput } from 'deri-ui';Live preview
typescript
<DUOTP length={6} onChange={(code) => console.log(code)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Digit count |
| value | string | — | Controlled value |
| onChange | (value: string) => void | — | Change handler |
| radius | DURadius | 'md' | Input corner radius |
Usage
import { DUOTP, DUPinInput } from 'deri-ui';
<DUOTP length={6} onChange={(code) => console.log(code)} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.