Campo de código de un solo uso (OTP) con animación por dígito.
npx shadcn@latest add https://reactbits.dev/r/CodeSlots-TS-TW
Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.
| Prop | Tipo | Por defecto |
|---|---|---|
| length | number | 6 |
| value | string | undefined |
| defaultValue | string | "" |
| onChange | (code: string) => void | - |
| onComplete | (code: string) => void | - |
| status | "idle" | "error" | "success" | "idle" |
| mask | boolean | false |
| caret | boolean | true |
| disabled | boolean | false |
| autoFocus | boolean | false |
| accentColor | string | "#f5f5f5" |
| inkColor | string | "#f5f5f5" |
| slotColor | string | "#27272a" |
| digitColor | string | "#18181b" |
| dangerColor | string | "#ff3b30" |
| slotSize | number | 44 |
| gap | number | 8 |
| radius | number | 12 |
| bounce | number | 0.2 |
| settle | number | 0.3 |
| rise | number | 8 |
| cascade | number | 20 |
| ariaLabel | string | "One-time code" |
| className | string | "" |