Campos de entrada

OTP code boxes

Una fila de cuadros de un solo carácter para ingresar un código de verificación, un dígito por cuadro con el cursor avanzando automáticamente.

Enter the 4-digit code

We sent a sign-in code to your phone ending in 41.

Masked entry

Cómo usar OTP code boxes

Una fila de cuadros de un solo carácter para ingresar un código de verificación, un dígito por cuadro con el cursor avanzando automáticamente.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: length, accent, masked

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

La vista previa y la descripción son públicas. Inicia sesión con una cuenta autorizada para abrir el código, las versiones y el panel de instalación.

Conecta tu agente

Relacionados

2297Addon Input GroupCampos de entradaUn campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo.

2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.

2109Appointment Scheduler CardCampos de entradaUn selector de fecha único enmarcado dentro de una tarjeta titulada con un botón para saltar a hoy en la esquina, diseñado para reservar una cita.

2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.

2805Autosize text fieldCampos de entradaUna entrada de texto de varias líneas que crece a medida que la persona escribe, hasta un límite generoso, con un anillo de enfoque de acento y un estado deshabilitado.

2757Avatar profile pickerCampos de entradaUna tarjeta de configuración de perfil: una etapa de avatar cuyo anillo luminoso cambia de color según la selección, una franja de miniaturas para cambiar de avatar y un campo de nombre de usuario validado.