Stepper

Componente de navegação por etapas com suporte a orientação horizontal e vertical, estados de carregamento e customização completa.

Utilização

index.tsx
import { 
  Stepper,
  StepperItem,
  StepperTrigger,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator 
} from "@convertcompany/ui";

Exemplos

Etapas em linha

Você pode usar o Stepper para criar etapas em linha sem nenhum título ou descrição.

Etapas com título e descrição

Você pode usar o Stepper para criar etapas com título e descrição.

Etapas na vertical

Você pode alterar a orientação das Tabs usando a propriedade orientation

Props

Stepper

PropriedadeTipo
defaultValueO passo inicial do stepper.
number
valueO passo atual do stepper (para controle controlado).
number
onValueChangeCallback chamado quando o valor do stepper muda.
(value: number) => void
orientationA orientação do stepper.
horizontal
vertical
classNameClasse CSS adicional para customização.
string
childrenOs componentes StepperItem que compõem o stepper.
ReactNode
...propsTodas as demais props nativas de <div>.
<HTMLDivElement>

StepperItem

PropriedadeTipo
stepO número do passo (obrigatório).
number
completedSe o passo está marcado como concluído.
boolean
disabledSe o passo está desabilitado.
boolean
loadingSe o passo está em estado de carregamento.
boolean
classNameClasse CSS adicional para customização.
string
childrenO conteúdo do item do stepper.
ReactNode
...propsTodas as demais props nativas de <div>.
<HTMLDivElement>

StepperTrigger

PropriedadeTipo
asChildSe deve renderizar como um elemento filho customizado.
boolean
classNameClasse CSS adicional para customização.
string
childrenO conteúdo do trigger.
ReactNode
...propsTodas as demais props nativas de <button>.
<HTMLButtonElement>

StepperIndicator

PropriedadeTipo
asChildSe deve renderizar como um elemento filho customizado.
boolean
classNameClasse CSS adicional para customização.
string
childrenO conteúdo do indicador (usado quando asChild é true).
ReactNode
...propsTodas as demais props nativas de <span>.
<HTMLSpanElement>

StepperTitle

PropriedadeTipo
classNameClasse CSS adicional para customização.
string
childrenO título do passo.
ReactNode
...propsTodas as demais props nativas de <h3>.
<HTMLHeadingElement>

StepperDescription

PropriedadeTipo
classNameClasse CSS adicional para customização.
string
childrenA descrição do passo.
ReactNode
...propsTodas as demais props nativas de <p>.
<HTMLParagraphElement>

StepperSeparator

PropriedadeTipo
classNameClasse CSS adicional para customização.
string
childrenO conteúdo do separador.
ReactNode
...propsTodas as demais props nativas de <div>.
<HTMLDivElement>