Pular para o conteúdo principal

Stepper​

Componente Stepper

📘 Modo de Uso​

O componente Stepper guia o usuário em processos multi-etapas, organizando fluxos complexos em tarefas menores e mais gerenciáveis.
É especialmente útil em cenários como:

  • Checkout em e-commerces;
  • Formulários longos, divididos em seções;
  • Tutoriais ou processos de onboarding;
  • Qualquer tarefa que exija ações sequenciais.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.stepper

🎨 Variantes​

Estados​

Estados

🛡️ Boas Práticas e Acessibilidade​

  • Use etiquetas claras e objetivas para cada etapa.
  • Mantenha a ordem lógica das etapas e evite ambiguidades.
  • Informe ao usuário em qual etapa ele está e quantas restam.
  • Garanta que o componente seja navegável por teclado e compatível com leitores de tela (WCAG 2.1 - 2.4.7 Foco Visível).