Ficha
- Categoría
- Forms
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 468:16080
- Fuente
design-system/componentes/OtpInput.md
Cuándo usarlo
- Códigos de verificación por correo (6 dígitos, 10 min, 3 intentos, reenvío a los 45 s).
Cuándo NO usarlo
- Códigos de invitación (alfanuméricos, pegados) → TextField.
Anatomía
Etiqueta body/sm-strong · fila de 6 cajas 48×56 radius-3x (borde 06-muted; activa: 2 px brand focus + anillo; error: danger 06-muted) con el dígito heading/md · input real transparente encima · ayuda body/xs.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
value | Digit · Populated (por OtpDigit) | hasta 6 dígitos | — |
error | Validation=error (por OtpDigit) | boolean | false |
| (foco) | State=focus (por OtpDigit) | derivado del input real | — |
label, help, onChange, disabled, id | — | etiqueta visible, ayuda, control | — |
Estados
default · focus (caja activa) · populated · error · disabled.
Accesibilidad
- Un input real (autocomplete="one-time-code", inputmode="numeric", maxlength 6) con etiqueta visible; pegar rellena todas las cajas; el error va ligado por aria-describedby y aria-invalid. Las cajas son decorativas.
Contenido
La ayuda dice vencimiento e intentos («vence en 10 minutos», «te quedan 2 intentos»).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).