Formularios

Estado: Beta

Código de verificación

Para el check-in en recepción o confirmar un correo: una casilla por dígito que avanza sola, regresa con Backspace y reparte un código pegado o autollenado por SMS. Cada dígito entra con un pequeño "pop" de resorte y, al completarse, puede enviar su formulario. El valor viaja en un campo oculto con su name.

Código de check-in

Lo ves en la pantalla de recepción.

PIN de la tarjeta de regalo

app/views/… (la demo de arriba)

<div class="flex w-full max-w-xs flex-col gap-7">
  <%= render Ui::OtpInputComponent.new(name: "check_in[code]", id: "otp-input-demo",
                                       label: "Código de check-in",
                                       description: "Lo ves en la pantalla de recepción.") %>

  <%= render Ui::OtpInputComponent.new(name: "gift_card[pin]", id: "otp-input-demo-error", length: 4, value: "1234",
                                       label: "PIN de la tarjeta de regalo",
                                       error: "PIN incorrecto. Te quedan 2 intentos.") %>
</div>

Qué hace

  • Avanza solo; Backspace borra y regresa; ←/→, Inicio y Fin mueven; Supr borra.
  • Pegar o el autollenado por SMS reparten el código (un código completo empieza en la primera casilla).
  • El dígito hace "pop" con un resorte corto; cursor que parpadea en la casilla activa.
  • Dispara otp-input:change y otp-input:complete con { value }.
  • Con Turbo, espera mientras se envía y se sacude si el servidor contesta con error.

Props

Nombre Tipo Default Descripción
name / form + attribute String / FormBuilder, Symbol — Nombre del campo oculto con el código completo, o el del modelo.
length Integer 6 Número de casillas (1–12).
label String "Código de verificación" Etiqueta visible del grupo.
hint String nil Ayuda debajo; se oculta mientras hay error (description: es su nombre anterior).
value String nil Dígitos iniciales (se ignora lo que no sea dígito).
error String nil Mensaje de error: casillas en rojo y una sacudida al aparecer.
auto_submit Boolean false Envía el formulario al completarse (requestSubmit; submit: es su nombre anterior).
disabled / autofocus Boolean false Deshabilita las casillas / enfoca la primera al cargar.

Accesibilidad