Input Code
BetaCódigo de verificación de 4 o 6 dígitos, una celda por dígito.
Abrir en Figma
registry/ds/input-code.tsxTe lo enviamos por SMS. Vence en 10 minutos.
import { InputCode } from "@/registry/ds/input-code";
export default function InputCodeBasic() {
return <InputCode label="Código de verificación" hint="Te lo enviamos por SMS. Vence en 10 minutos." />;
}Cuándo usarlo
Solo para códigos cortos de un solo uso: verificación por SMS o correo, PIN, segundo factor. Para cualquier otro número (DNI, legajo, teléfono) usá un Input.
- 6 dígitos para verificación (con separador al medio, se lee de a tres). 4 dígitos para PIN.
- Verificá solo al completar: usá
onValueComplete, sin botón extra. - Ofrecé siempre "Reenviar código" cerca, con su cuenta regresiva.
- Decí a dónde se envió y cuánto dura.
Variantes
import { InputCode } from "@/registry/ds/input-code";
export default function InputCodeFour() {
return <InputCode length={4} size="lg" label="PIN" defaultValue="28" />;
}Error
El error marca todas las celdas: lo que está mal es el código, no un dígito.
El código no coincide. Revisalo o pedí uno nuevo.
import { InputCode } from "@/registry/ds/input-code";
export default function InputCodeError() {
return <InputCode size="sm" label="Código de verificación" defaultValue="482913" error="El código no coincide. Revisalo o pedí uno nuevo." />;
}Medidas
| Size | Celda | Dígito |
|---|---|---|
sm | 44 | Text xl / Medium |
md | 52 | Text xl / Medium |
lg | 60 | Text 2xl / Medium |
Gap entre celdas spacing-md (8). Radio radius-md (8). Con 6 dígitos, un
separador de 12 × 2 entre la tercera y la cuarta.
Tokens
| Parte | Propiedad | Token |
|---|---|---|
| Celda | Fondo | bg/elevated |
| Celda | Borde | border/default |
| Celda · hover | Borde | border/hover |
| Celda · foco | Borde + anillo 2 px | focus/ring |
| Celda · error | Borde | danger/accent |
| Dígito | Color | primary/accent |
| Separador | Fondo | border/default |
| Ayuda / error | Color | text/subtle |
En Figma
| Propiedad en Figma | Valores | En código | Nota |
|---|---|---|---|
| Digits | 4 · 6 | length | — |
| Size | sm · md · lg | size | — |
| State | Default · Focused · Error | error | — |
| Label · Hint · Required | Texto · on/off | label · hint · required | — |
Instalación
npx shadcn@latest add https://polen.cdc.cool/r/input-code.jsonPlayground
Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.
Te lo enviamos por SMS.
Celdas
size
<InputCode label="Código de verificación" hint="Te lo enviamos por SMS." />Uso
<InputCode
label="Código de verificación"
onValueComplete={(code) => verify(code)}
error={failed ? "El código no coincide." : undefined}
/>Props
Sobre Base UI OTP Field.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
length | 4 | 6 | 6 | Cantidad de celdas. |
size | "sm" | "md" | "lg" | "md" | Celdas de 44 / 52 / 60. |
label · hint · error | ReactNode | — | Como en Input. El error marca todas las celdas. |
value / defaultValue | string | — | El código, como un solo string. |
onValueChange | (value: string) => void | — | En cada cambio. |
onValueComplete | (value: string) => void | — | Cuando se completan todas las celdas. |
disabled | boolean | false | Bloquea todas las celdas. |
Qué viene resuelto
- Pegar el código completo lo reparte en las celdas.
autocomplete="one-time-code": iOS y Android ofrecen el código del SMS.- Teclado numérico en mobile. Escribir avanza; Backspace retrocede; ← → mueven entre celdas.
- Cada celda se anuncia como "Dígito N de 6"; la primera lleva el label.
Qué tenés que cuidar vos
- No limpies el código al fallar: dejá que la persona corrija un dígito.
- El mensaje de error dice qué hacer: revisar o pedir uno nuevo.
- Dale tiempo: un código que vence en 30 segundos excluye a mucha gente.