Formularios

Tall Code Keypad

Tall Code Keypad: Un formulario de verificación sin bordes construido sobre cuadros de códigos inusualmente altos, con dígitos que llegan con un rebote corto y un retroceso mantenido que borra todo.

Enter verification code

We sent a 6-digit code to your device. Enter it below to continue.

Didn’t get a code?

By continuing you agree to the terms of service and privacy policy.

Cómo usar Tall Code Keypad

Tall Code Keypad se presenta con el formato de vista previa «tarjeta» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`accentColor`	`color`	`#FF4D8D`	Los metadatos no indican otro límite.
`length`	`number`	`6`	De 4 a 8; paso 2
`cellHeight`	`number`	`64`	De 48 a 80; paso 4
`holdToClear`	`boolean`	`true`	Los metadatos no indican otro límite.
`heading`	`text`	`Enter verification code`	Hasta 48 caracteres

¿Para qué frameworks está disponible Tall Code Keypad?

Tall Code Keypad está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Tall Code Keypad?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.

¿Qué detalles de accesibilidad se observan en Tall Code Keypad?

El código React de Tall Code Keypad incluye: elementos nativos (a, button, input); atributos y manejadores (aria-hidden, aria-label, onKeyDown, onKeyUp); roles explícitos (group). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Tall Code Keypad el movimiento reducido?

Tall Code Keypad consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Verification Code Card de Fieldbook, de la categoría Formularios.

2080Verification Code CardFormulariosUn paso de verificación en cuadro con un campo de código etiquetado, un botón Verificar que se desbloquea solo cuando se completa el código y un enlace de reenvío en una cuenta regresiva.

Imagen fija del componente Focus Guard Form de Fieldbook, de la categoría Formularios.

1964Focus Guard FormFormulariosUn formulario que, en caso de un envío fallido, cancela el envío, mueve el foco del teclado directamente al primer campo no válido y anuncia el problema a los usuarios de lectores de pantalla.

Imagen fija del componente Notification preferences de Fieldbook, de la categoría Formularios.

2876Notification preferencesFormulariosElige opciones de entrega para eventos del espacio y guarda un resumen de preferencias.

Imagen fija del componente Release notification form de Fieldbook, de la categoría Formularios.

2887Release notification formFormulariosUn formulario de novedades valida el correo y registra una preferencia local sobre qué actualizaciones recibir.

Imagen fija del componente Scribble strike checklist de Fieldbook, de la categoría Formularios.

2028Scribble strike checklistFormulariosUna lista de tareas en la que marcar una fila dibuja una línea oscilante dibujada a mano a lo largo de la etiqueta y al desmarcarla se retrae.

Imagen fija del componente Scrub Number Input de Fieldbook, de la categoría Formularios.

2030Scrub Number InputFormulariosUn campo numérico con botones de incremento y disminución más una etiqueta que se puede arrastrar y que desplaza el valor hacia arriba o hacia abajo a medida que lo arrastra hacia los lados.