# Stepper

> Pasos de un formulario de varias pantallas.

Categoría: Estado & Progreso · 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

- Desde 3 pasos. Con 2, basta el título de cada pantalla.
- Solo si el paso cabe en pantalla. Si tiene scroll, va una barra de avance: ver Patrones › Formularios complejos.
- Entre 3 y 6 pasos, con 8 de techo.
- Horizontal numerado hasta 5 pasos en escritorio y 3 en el celular; con más, el compacto.
- Orden fijo y nombres que digan qué se hace: no se salta a un paso sin completar el anterior.

Por qué: Lo que pesa en un formulario no es en cuántas pantallas esté repartido, sino cuántos campos hay que resolver en cada una. La medición de Baymard sobre pagos en línea (2024) deja el promedio en 5,1 pasos y 11,3 campos, y la usabilidad cae recién pasados los 8 pasos.
El tope del horizontal es medición propia: con 5 pasos la última etiqueta no cabe en el celular y la página queda con scroll lateral.
En un paso con scroll el stepper se va de pantalla justo mientras se llenan los campos, que es cuando hace falta saber cuánto queda.
El orden fijo, no poder saltar a un paso sin completar el anterior y los nombres descriptivos en vez de «Siguiente» y «Anterior» vienen de las recomendaciones de NN/G sobre wizards.

## Horizontal · numerado

Hasta 5 pasos en escritorio y 3 en el celular. Es la forma por defecto cuando los pasos caben en una fila y sus nombres son cortos.

```html
<div>
  <ol class="flex items-start">
    <li class="flex-1 relative">
      <div class="flex flex-col items-center">
        <div class="w-10 h-10 rounded-full bg-ccs-success-fill text-white grid place-items-center font-semibold relative z-10 dark:bg-ccs-dark-success-fill">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg>
        </div>
        <div class="mt-3 text-center"><div class="text-sm font-semibold">Datos empresa</div><div class="text-xs text-ccs-slate mt-0.5 dark:text-ccs-dark-text-2">Completado</div></div>
      </div>
      <div class="absolute top-5 left-1/2 right-0 h-0.5 bg-ccs-green"></div>
    </li>
    <li class="flex-1 relative">
      <div class="flex flex-col items-center">
        <div class="w-10 h-10 rounded-full bg-ccs-success-fill text-white grid place-items-center font-semibold relative z-10 dark:bg-ccs-dark-success-fill">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg>
        </div>
        <div class="mt-3 text-center"><div class="text-sm font-semibold">Documentos</div><div class="text-xs text-ccs-slate mt-0.5 dark:text-ccs-dark-text-2">Completado</div></div>
      </div>
      <div class="absolute top-5 left-0 right-1/2 h-0.5 bg-ccs-green"></div>
      <div class="absolute top-5 left-1/2 right-0 h-0.5 bg-ccs-blue dark:bg-ccs-dark-accent"></div>
    </li>
    <li class="flex-1 relative">
      <div class="flex flex-col items-center">
        <div class="w-10 h-10 rounded-full bg-ccs-blue text-white grid place-items-center font-semibold relative z-10 ring-4 ring-ccs-blue/20 dark:ring-ccs-dark-accent/25 dark:bg-ccs-blue-mid">3</div>
        <div class="mt-3 text-center"><div class="text-sm font-semibold text-ccs-blue dark:text-ccs-dark-accent">Comités</div><div class="text-xs text-ccs-slate mt-0.5 dark:text-ccs-dark-text-2">En curso</div></div>
      </div>
      <div class="absolute top-5 left-0 right-1/2 h-0.5 bg-ccs-blue dark:bg-ccs-dark-accent"></div>
      <div class="absolute top-5 left-1/2 right-0 h-0.5 bg-ccs-line dark:bg-ccs-dark-line"></div>
    </li>
    <li class="flex-1 relative">
      <div class="flex flex-col items-center">
        <div class="w-10 h-10 rounded-full bg-white border-2 border-ccs-line text-ccs-slate grid place-items-center font-semibold relative z-10 dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">4</div>
        <div class="mt-3 text-center"><div class="text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">Pago</div><div class="text-xs text-ccs-slate mt-0.5 dark:text-ccs-dark-text-2">Pendiente</div></div>
      </div>
      <div class="absolute top-5 left-0 right-1/2 h-0.5 bg-ccs-line dark:bg-ccs-dark-line"></div>
      <div class="absolute top-5 left-1/2 right-0 h-0.5 bg-ccs-line dark:bg-ccs-dark-line"></div>
    </li>
    <li class="flex-1 relative">
      <div class="flex flex-col items-center">
        <div class="w-10 h-10 rounded-full bg-white border-2 border-ccs-line text-ccs-slate grid place-items-center font-semibold relative z-10 dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">5</div>
        <div class="mt-3 text-center"><div class="text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">Confirmación</div><div class="text-xs text-ccs-slate mt-0.5 dark:text-ccs-dark-text-2">Pendiente</div></div>
      </div>
      <div class="absolute top-5 left-0 right-1/2 h-0.5 bg-ccs-line dark:bg-ccs-dark-line"></div>
    </li>
  </ol>
</div>
```

## Compacto · pill

Cuando el horizontal no cabe: 6 pasos o más, nombres largos o anchos chicos. Se envuelve en varias líneas sin cortarse.

```html
<div>
  <div class="inline-flex items-center gap-2 flex-wrap">
    <span class="inline-flex items-center gap-2 h-8 pl-2 pr-3 rounded-full bg-ccs-success-soft text-ccs-success text-sm font-medium dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">
      <span class="w-5 h-5 rounded-full bg-ccs-success-fill text-white grid place-items-center dark:bg-ccs-dark-success-fill"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg></span>
      Datos
    </span>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <span class="inline-flex items-center gap-2 h-8 pl-2 pr-3 rounded-full bg-ccs-blue text-white text-sm font-medium dark:bg-ccs-blue-mid">
      <span class="w-5 h-5 rounded-full bg-white/25 text-white text-xs grid place-items-center font-semibold">2</span>
      Documentos
    </span>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <span class="inline-flex items-center gap-2 h-8 pl-2 pr-3 rounded-full bg-ccs-bg text-ccs-slate text-sm font-medium dark:text-ccs-dark-text-2 dark:bg-ccs-dark-overlay">
      <span class="w-5 h-5 rounded-full bg-white border border-ccs-line text-xs grid place-items-center dark:border-ccs-dark-line dark:bg-ccs-dark-surface">3</span>
      Pago
    </span>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <span class="inline-flex items-center gap-2 h-8 pl-2 pr-3 rounded-full bg-ccs-bg text-ccs-slate text-sm font-medium dark:text-ccs-dark-text-2 dark:bg-ccs-dark-overlay">
      <span class="w-5 h-5 rounded-full bg-white border border-ccs-line text-xs grid place-items-center dark:border-ccs-dark-line dark:bg-ccs-dark-surface">4</span>
      Confirmación
    </span>
  </div>
</div>
```

## Vertical · con descripciones

No es navegación de un formulario: muestra el estado de un trámite ya enviado, con fechas y tiempos estimados. La persona no avanza, espera.

```html
<div>
  <ol class="relative">
    <li class="flex gap-4 pb-8 relative">
      <div class="absolute left-[15px] top-9 bottom-0 w-0.5 bg-ccs-green"></div>
      <div class="w-8 h-8 rounded-full bg-ccs-success-fill text-white grid place-items-center shrink-0 relative z-10 dark:bg-ccs-dark-success-fill">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg>
      </div>
      <div>
        <div class="text-sm font-semibold">Solicitud enviada</div>
        <div class="text-xs text-ccs-slate tabular-nums mt-0.5 dark:text-ccs-dark-text-2">12 May 2026 · 10:42</div>
        <p class="text-sm text-ccs-slate mt-2 max-w-md dark:text-ccs-dark-text-2">Recibimos tu solicitud de incorporación y la asignamos a nuestro equipo comercial.</p>
      </div>
    </li>
    <li class="flex gap-4 pb-8 relative">
      <div class="absolute left-[15px] top-9 bottom-0 w-0.5 bg-ccs-blue dark:bg-ccs-dark-accent"></div>
      <div class="w-8 h-8 rounded-full bg-ccs-blue text-white grid place-items-center shrink-0 relative z-10 ring-4 ring-ccs-blue/15 dark:ring-ccs-dark-accent/25 dark:bg-ccs-blue-mid">
        <span class="w-2 h-2 rounded-full bg-white"></span>
      </div>
      <div>
        <div class="text-sm font-semibold text-ccs-blue dark:text-ccs-dark-accent">Revisión de antecedentes</div>
        <div class="text-xs text-ccs-slate tabular-nums mt-0.5 dark:text-ccs-dark-text-2">En curso · ETA 48h</div>
        <p class="text-sm text-ccs-slate mt-2 max-w-md dark:text-ccs-dark-text-2">Validamos los documentos enviados y la situación tributaria de la empresa.</p>
      </div>
    </li>
    <li class="flex gap-4 pb-8 relative">
      <div class="absolute left-[15px] top-9 bottom-0 w-0.5 bg-ccs-line dark:bg-ccs-dark-line"></div>
      <div class="w-8 h-8 rounded-full bg-white border-2 border-ccs-line text-ccs-slate grid place-items-center shrink-0 relative z-10 text-sm font-semibold dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">3</div>
      <div>
        <div class="text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">Reunión inicial</div>
        <p class="text-sm text-ccs-slate mt-2 max-w-md dark:text-ccs-dark-text-2">Conversación con el equipo de membresía para definir áreas de interés.</p>
      </div>
    </li>
    <li class="flex gap-4 relative">
      <div class="w-8 h-8 rounded-full bg-white border-2 border-ccs-line text-ccs-slate grid place-items-center shrink-0 relative z-10 text-sm font-semibold dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">4</div>
      <div>
        <div class="text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">Activación</div>
        <p class="text-sm text-ccs-slate mt-2 max-w-md dark:text-ccs-dark-text-2">Acceso a tu cuenta y kit de bienvenida.</p>
      </div>
    </li>
  </ol>
</div>
```