37/Interacción y estado

Stepper

Pasos de un proceso, horizontal o vertical. En móvil el horizontal se apila.

Horizontal

✓CuentaDatos básicos
2EmpresaNIT y dirección
3PagoPlan y tarjeta

HTML

<ol class="cb-stepper">
  <li class="cb-stepper__step is-complete"><span class="cb-stepper__marker">✓</span><span class="cb-stepper__body"><span class="cb-stepper__label">Cuenta</span><span class="cb-stepper__desc">Datos básicos</span></span></li>
  <li class="cb-stepper__step" aria-current="step"><span class="cb-stepper__marker">2</span><span class="cb-stepper__body"><span class="cb-stepper__label">Empresa</span><span class="cb-stepper__desc">NIT y dirección</span></span></li>
  <li class="cb-stepper__step"><span class="cb-stepper__marker">3</span><span class="cb-stepper__body"><span class="cb-stepper__label">Pago</span><span class="cb-stepper__desc">Plan y tarjeta</span></span></li>
</ol>

Vertical

✓Pedido recibido12 oct, 09:14
2En preparaciónEstimado: hoy
3Entregado

HTML

<ol class="cb-stepper cb-stepper--vertical">
  <li class="cb-stepper__step is-complete"><span class="cb-stepper__marker">✓</span><span class="cb-stepper__body"><span class="cb-stepper__label">Pedido recibido</span><span class="cb-stepper__desc">12 oct, 09:14</span></span></li>
  <li class="cb-stepper__step" aria-current="step"><span class="cb-stepper__marker">2</span><span class="cb-stepper__body"><span class="cb-stepper__label">En preparación</span><span class="cb-stepper__desc">Estimado: hoy</span></span></li>
  <li class="cb-stepper__step"><span class="cb-stepper__marker">3</span><span class="cb-stepper__body"><span class="cb-stepper__label">Entregado</span></span></li>
</ol>

Clases y modificadores

Clase	Descripción
`.cb-stepper`	Lista de pasos. `--vertical` para la versión vertical.
`.cb-stepper__step`	Paso. `.is-complete` lo marca hecho; `aria-current="step"` es el actual.
`.cb-stepper__marker`	Número o marca.
`.cb-stepper__label`, `.cb-stepper__desc`	Texto del paso.

Accesibilidad

Usa ol y aria-current="step" en el paso actual.
Si el marcador de completado es "✓", agrega texto oculto como "completado" en cb-sr-only.