# Código de verificación

> Casillas para el código de un solo uso: 6 y 4 dígitos, separador, alfanumérico, inválido y deshabilitado.

Categoría: Formularios · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para códigos de un solo uso que llegan por correo o SMS.
- No para claves ni números de documento: esos van en un campo normal.
- Con la cantidad de casillas igual al largo del código.

## 6 dígitos

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-1" class="block text-sm font-medium mb-1.5">Código de verificación</label><input id="otp-1" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"   /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">4</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">8</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">1</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface z-10 border-ccs-blue ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:ring-ccs-dark-accent/25"><span class="w-px h-5 bg-ccs-ink dark:bg-ccs-dark-text animate-pulse" aria-hidden="true"></span></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div></div></div>
```

## Con separador

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-2" class="block text-sm font-medium mb-1.5">Código de verificación</label><input id="otp-2" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"   /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">4</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">8</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">1</div></div><span class="px-1 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:minus-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">2</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface z-10 border-ccs-blue ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:ring-ccs-dark-accent/25"><span class="w-px h-5 bg-ccs-ink dark:bg-ccs-dark-text animate-pulse" aria-hidden="true"></span></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div></div></div>
```

## 4 dígitos

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-3" class="block text-sm font-medium mb-1.5">Código del SMS</label><input id="otp-3" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"   /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">7</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">3</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface z-10 border-ccs-blue ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:ring-ccs-dark-accent/25"><span class="w-px h-5 bg-ccs-ink dark:bg-ccs-dark-text animate-pulse" aria-hidden="true"></span></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div></div></div>
```

## Alfanumérico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-4" class="block text-sm font-medium mb-1.5">Código de invitación</label><input id="otp-4" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"   /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">A</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">7</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">K</div></div><span class="px-1 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:minus-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface z-10 border-ccs-blue ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:ring-ccs-dark-accent/25"><span class="w-px h-5 bg-ccs-ink dark:bg-ccs-dark-text animate-pulse" aria-hidden="true"></span></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div></div></div>
```

## Inválido

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-5" class="block text-sm font-medium mb-1.5">Código de verificación</label><input id="otp-5" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6" aria-invalid="true"  /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">4</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">8</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">1</div></div><span class="px-1 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:minus-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">2</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">9</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface border-ccs-error-fill bg-ccs-error-soft dark:border-ccs-dark-error dark:bg-ccs-dark-error-fill/10">0</div></div></div><div id="otp-5-e" class="text-xs text-ccs-error mt-2 inline-flex items-center gap-1 dark:text-ccs-dark-error"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[14px] " aria-hidden="true"></iconify-icon>El código no es correcto. Revisa el correo o pide uno nuevo.</div></div></div>
```

## Deshabilitado

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label for="otp-6" class="block text-sm font-medium mb-1.5">Código de verificación</label><input id="otp-6" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"  disabled /><div class="flex items-center" aria-hidden="true"><div class="flex items-center opacity-50"><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div><div class="text-xs mt-1.5 text-ccs-slate dark:text-ccs-dark-text-2 mt-2">Podrás escribir el código cuando llegue el correo.</div></div></div>
```

## En un formulario

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><h4 class="text-lg font-semibold">Revisa tu correo</h4><p class="mt-1 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Enviamos un código de 6 dígitos a c••••@empresa.cl.</p><div class="mt-5"><div><label for="otp-f" class="block text-sm font-medium mb-1.5">Código de verificación</label><input id="otp-f" class="sr-only" inputmode="numeric" autocomplete="one-time-code" maxlength="6"   /><div class="flex items-center" aria-hidden="true"><div class="flex items-center "><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">4</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">8</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface">1</div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface z-10 border-ccs-blue ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:ring-ccs-dark-accent/25"><span class="w-px h-5 bg-ccs-ink dark:bg-ccs-dark-text animate-pulse" aria-hidden="true"></span></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div><div class="relative grid place-items-center w-11 h-12 border-y border-r border-ccs-line-strong bg-white text-base font-medium first:rounded-l-lg first:border-l last:rounded-r-lg dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface"></div></div></div></div></div><div class="mt-5 flex flex-col gap-3"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue w-full active:scale-95 motion-reduce:active:scale-100">Verificar</button><p class="text-sm text-center text-ccs-slate dark:text-ccs-dark-text-2">¿No te llegó? Puedes pedir otro en 0:45</p></div></div></div>
```

## Guía: Comportamiento

Pegar el código completo lo reparte en las casillas. Retroceso borra y vuelve a la anterior. En el celular, inputmode="numeric" abre el teclado de números y one-time-code ofrece el código del SMS. Si los 6 dígitos están, se puede enviar solo; si falla, el error va bajo las casillas y se borran.
