vaiperui

componentes / stepper

Stepper

Mostra o progresso em um fluxo sequencial, como checkout ou onboarding.

Como usar

Coloque `Step`s dentro de um `Stepper` e defina `current` (base zero): as etapas anteriores ficam concluídas (check), a atual fica destacada com `aria-current="step"` e as seguintes ficam pendentes. Ele só exibe o progresso; sua tela cuida de avançar e validar. Passe `onStepClick` para transformar etapas concluídas em botões que voltam. Use `orientation="vertical"` com `description` em cada etapa.

preview
  2. Endereço
  3. Pagamento
Stepper.tsx
import { Step, Stepper } from "vaiperui";
 
<Stepper current={1} aria-label="Etapas do cadastro">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>

Cores

preview
  1. ContaCompleted
  2. Endereço
  3. Pagamento
primary
  1. ContaCompleted
  2. Endereço
  3. Pagamento
success
  1. ContaCompleted
  2. Endereço
  3. Pagamento
warning
  1. ContaCompleted
  2. Endereço
  3. Pagamento
danger
cores.tsx
<Stepper current={1} variantColor="primary">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} variantColor="success">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} variantColor="warning">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} variantColor="danger">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>

Tamanhos

preview
  1. ContaCompleted
  2. Endereço
  3. Pagamento
sm
  1. ContaCompleted
  2. Endereço
  3. Pagamento
md
  1. ContaCompleted
  2. Endereço
  3. Pagamento
lg
tamanhos.tsx
<Stepper current={1} size="sm">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} size="md">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} size="lg">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>

Cor personalizada

preview
  1. ContaCompleted
  2. Endereço
  3. Pagamento
Laranja
  1. ContaCompleted
  2. Endereço
  3. Pagamento
Violeta
cor-personalizada.tsx
<Stepper current={1} customColor="#f97316">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>
 
<Stepper current={1} customColor="#8b5cf6">
  <Step>Conta</Step>
  <Step>Endereço</Step>
  <Step>Pagamento</Step>
</Stepper>

Vertical

preview
  1. ContaE-mail e senhaCompleted
  2. EndereçoOnde entregar
  3. PagamentoCartão ou boleto
vertical
vertical.tsx
<Stepper current={1} orientation="vertical">
  <Step description="…">Conta</Step>
  …
</Stepper>

Props

PropValoresPadrãoDescrição
currentnumberobrigatórioÍndice (base zero) da etapa ativa
orientationhorizontal | verticalhorizontalDisposição das etapas
onStepClick(index: number) => voidnenhumTransforma etapas concluídas em botões que chamam isto com o índice
completedLabelstringCompletedTexto para leitores de tela adicionado às etapas concluídas
variantColorprimary | success | warning | dangerprimaryCor de destaque do estado ativo e do anel de foco
customColorstring | { light, dark }nenhumQualquer cor CSS (ou um par por tema). Substitui o variantColor
sizesm | md | lgmdTamanho do controle e do texto
animationnone | smooth | fast | bouncesmoothTransição entre estados
Step: children, descriptionReactNode, ReactNodenenhumO rótulo da etapa e uma linha secundária opcional

Acessibilidade

  • Renderiza uma lista ordenada (`<ol>`) com um `<li>` por etapa, em ordem de leitura.
  • O `<li>` da etapa atual tem `aria-current="step"`.
  • Etapas concluídas incluem texto visualmente oculto vindo de `completedLabel` (padrão "Completed").
  • O número, o ícone de check e as linhas de conexão são `aria-hidden`.
  • Com `onStepClick`, só as etapas concluídas viram botões nativos; etapa atual e futuras são texto simples.

Teclado

TeclaAção
TabPercorre as etapas concluídas quando `onStepClick` está definido.
Enter / SpaceAtiva a etapa concluída focada.

Tenha em mente

  • Traduza `completedLabel`; o padrão está em inglês.
  • É um indicador de progresso, não um widget de navegação: não adiciona `aria-label` à lista e não permite pular para etapas futuras.