CSS Element

Stepper [y2stepper]

Indicador de progresso em etapas - horizontal, vertical, com estados concluído, ativo e erro.

1. Horizontal

1
Cadastro Concluído
2
Endereço Concluído
3
Pagamento Em andamento
4
Confirmação Pendente

2. Com Estado de Erro

1
Dados pessoais
!
Documento CPF inválido
3
Revisão

3. Vertical

1
Pedido confirmado 12/03/2026 às 14:22
2
Em separação 13/03/2026 às 09:15
3
Em transporte Previsão: 15/03/2026
4
Entregue

4. Stepper Interativo

1
Informações
2
Endereço
3
Pagamento
4
Confirmar
let currentStep = 0;
const steps = document.querySelectorAll('[y2stepper] .y2stepper-it');

function goToStep(n) {
  steps.forEach((step, i) => {
    step.classList.remove('is-act', 'is-don');
    if (i < n) step.classList.add('is-don');
    else if (i === n) step.classList.add('is-act');
  });
  currentStep = n;
}

Quick Reference

Atributo/Classe Tipo Descrição
[y2stepper] Container Container do stepper horizontal (padrão).
.is-ver Modificador Orientação vertical.
.y2stepper-it Item Etapa individual do stepper.
.is-don Estado Etapa concluída (cor de sucesso).
.is-act Estado Etapa atual/ativa (cor primária).
.is-err Estado Etapa com erro (cor de perigo).
.y2stepper-dot Elemento Círculo indicador - exibe número, ? ou ícone.
.y2stepper-lbl Elemento Container do rótulo da etapa.
.y2stepper-ttl Elemento Título da etapa.
.y2stepper-sub Elemento Subtítulo/descrição da etapa.