Navegação

Indicador de etapas

Stepper / Steps

Mostra a sequência e o progresso de uma tarefa com vários passos.

✓Conta2Perfil3Pronto

Exemplo didático · Representação visual do padrão

Quando usar

Orientar cadastros, compras e configurações com começo e fim.

Cuidados e acessibilidade

Diferencie etapas concluídas, atuais e futuras também por texto.

Partes e comportamento

Sequência de etapas com nome, estado e posição atual.

Não confunda

Number stepper altera um número. Este stepper indica fases de um fluxo.

Exemplo de código

<ol aria-label="Etapas do cadastro">
  <li>Conta — concluída</li>
  <li aria-current="step">Perfil — etapa atual</li>
  <li>Conclusão</li>
</ol>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Indicador de etapas (Stepper / Steps) em português do Brasil. Mostra a sequência e o progresso de uma tarefa com vários passos. Contexto de uso: Orientar cadastros, compras e configurações com começo e fim. Estrutura: Sequência de etapas com nome, estado e posição atual. Referência técnica: aria-current="step". Requisito: Diferencie etapas concluídas, atuais e futuras também por texto. Considere também: Number stepper altera um número. Este stepper indica fases de um fluxo. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗