vaiperui

componentes / stepper

Stepper

Muestra el progreso en un flujo secuencial, como un checkout u onboarding.

Cómo usar

Pon `Step`s dentro de un `Stepper` y define `current` (base cero): los pasos anteriores quedan completados (check), el actual se resalta con `aria-current="step"` y los siguientes quedan pendientes. Solo muestra el progreso; tu pantalla se encarga de avanzar y validar. Pasa `onStepClick` para convertir los pasos completados en botones que retroceden. Usa `orientation="vertical"` con `description` en cada paso.

preview
  2. Dirección
  3. Pago
Stepper.tsx
import { Step, Stepper } from "vaiperui";
 
<Stepper current={1} aria-label="Pasos del registro">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>

Colores

preview
  1. CuentaCompleted
  2. Dirección
  3. Pago
primary
  1. CuentaCompleted
  2. Dirección
  3. Pago
success
  1. CuentaCompleted
  2. Dirección
  3. Pago
warning
  1. CuentaCompleted
  2. Dirección
  3. Pago
danger
colores.tsx
<Stepper current={1} variantColor="primary">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} variantColor="success">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} variantColor="warning">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} variantColor="danger">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>

Tamaños

preview
  1. CuentaCompleted
  2. Dirección
  3. Pago
sm
  1. CuentaCompleted
  2. Dirección
  3. Pago
md
  1. CuentaCompleted
  2. Dirección
  3. Pago
lg
tamanos.tsx
<Stepper current={1} size="sm">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} size="md">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} size="lg">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>

Color personalizado

preview
  1. CuentaCompleted
  2. Dirección
  3. Pago
Naranja
  1. CuentaCompleted
  2. Dirección
  3. Pago
Violeta
color-personalizado.tsx
<Stepper current={1} customColor="#f97316">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>
 
<Stepper current={1} customColor="#8b5cf6">
  <Step>Cuenta</Step>
  <Step>Dirección</Step>
  <Step>Pago</Step>
</Stepper>

Vertical

preview
  1. CuentaCorreo y contraseñaCompleted
  2. DirecciónDónde enviar
  3. PagoTarjeta o boleto
vertical
vertical.tsx
<Stepper current={1} orientation="vertical">
  <Step description="…">Cuenta</Step>
  …
</Stepper>

Props

PropValoresPredeterminadoDescripción
currentnumberobligatorioÍndice (base cero) del paso activo
orientationhorizontal | verticalhorizontalDisposición de los pasos
onStepClick(index: number) => voidningunoConvierte los pasos completados en botones que llaman a esto con su índice
completedLabelstringCompletedTexto para lectores de pantalla añadido a los pasos completados
variantColorprimary | success | warning | dangerprimaryColor de acento del estado activo y del anillo de foco
customColorstring | { light, dark }ningunoCualquier color CSS (o un par por tema). Reemplaza a variantColor
sizesm | md | lgmdTamaño del control y del texto
animationnone | smooth | fast | bouncesmoothTransición entre estados
Step: children, descriptionReactNode, ReactNodeningunoLa etiqueta del paso y una línea secundaria opcional

Accesibilidad

  • Renderiza una lista ordenada (`<ol>`) con un `<li>` por paso, en orden de lectura.
  • El `<li>` del paso actual tiene `aria-current="step"`.
  • Los pasos completados incluyen texto visualmente oculto de `completedLabel` (por defecto "Completed").
  • El número, el icono de check y las líneas de conexión son `aria-hidden`.
  • Con `onStepClick`, solo los pasos completados se vuelven botones nativos; el paso actual y los futuros son texto simple.

Teclado

TeclaAcción
TabRecorre los pasos completados cuando `onStepClick` está definido.
Enter / SpaceActiva el paso completado enfocado.

Ten en cuenta

  • Traduce `completedLabel`; su valor por defecto está en inglés.
  • Es un indicador de progreso, no un widget de navegación: no añade `aria-label` a la lista y no permite saltar a pasos futuros.