Stepper
El componente Stepper guía a los usuarios a través de un proceso dividido en pasos secuenciales, mostrando su progreso y permitiendo navegar entre etapas del flujo.
import React, { useState } from "react";
import { Box, Button, Stepper, Text } from "@nimbus-ds/components";
import { mockStepperLabels as labels } from "../../../lib/mocks/mock-labels";
const Example: React.FC = () => {
const [selected, setSelected] = useState(0);
const [activeStep, setActiveStep] = useState(0);
return (
<Box display="flex" flexDirection="column" gap="3" minWidth="250px">
<Text color="neutral-textHigh">Selected step: {selected + 1}</Text>
<Stepper
activeStep={activeStep}
selectedStep={selected}
onSelectStep={setSelected}
justifyContent="flex-start"
>
{labels.map((label) => (
<Stepper.Item key={label} label={label} />
))}
</Stepper>
<Box display="flex" gap="3">
<Button
onClick={() => {
setActiveStep(activeStep - 1);
setSelected(activeStep - 1);
}}
disabled={activeStep === 0}
>
Previous
</Button>
<Button
appearance="primary"
onClick={() => {
setActiveStep(activeStep + 1);
setSelected(activeStep + 1);
}}
disabled={activeStep === labels.length - 1}
>
Next
</Button>
</Box>
</Box>
);
};
export default Example;El Stepper puede contener:
- Asset
- Text
- Line
Este componente utiliza:
- #text
- #icon
- Desktop
- Mobile
- Guiar al usuario a través de un proceso estructurado en pasos secuenciales.
- Ideal para flujos de configuración o onboarding donde el orden es relevante.
- Reducir la carga cognitiva dividiendo tareas complejas. Presentar un paso a la vez hace que el proceso parezca más simple y abordable.
- Permitir la navegación entre pasos. En flujos editables, el usuario puede volver a un paso anterior para revisar o corregir datos.
- El flujo no requiere un orden secuencial claro. Si los pasos pueden completarse en cualquier orden o no dependen uno del otro.
- Hay menos de tres pasos. No justifica el uso del stepper.
- El usuario no puede interactuar con los pasos. Si no se puede avanzar ni retroceder manualmente y no hay retroalimentación visible.
- Enfocar el flujo en la acción principal: Al iniciar un flujo con Stepper, asegúrate de colocar el foco en el primer campo relevante del paso activo para reducir fricción inicial.
- Navegación fluida con teclado: Permitir avanzar y retroceder entre pasos mediante el uso de Tab, Shift+Tab y teclas direccionales.
- Feedback instantáneo y visible: Muestra indicador de éxito cuando los pasos son completados.
- Persistencia de contexto: El usuario puede modificar un paso previo sin completar el paso en curso, y posteriormente finalizarlo.
- Minimizar pantallas de confirmación: Al completar un paso exitosamente, evita interrupciones y avanza de forma automática al siguiente paso.
- Soporte completo para navegación por teclado: Asegurar que cada paso y control dentro del Stepper sea accesible mediante teclado (Tab/Shift+Tab y Enter).
- Manejo correcto del foco: Al cambiar de paso, el foco debe moverse automáticamente al primer elemento interactivo del nuevo paso.
- Mensajes y estados accesibles: Mostrar los estados (completo, actual, pendiente) mediante texto visible y atributos aria-current, aria-disabled y aria-label adecuados.
- Áreas de tap adecuadas en mobile: Asegurar que los ítems tengan un área mínima de 44x44px, para garantizar una interacción precisa.
- Desktop
- Mobile
- Current: Paso donde el usuario está actualmente. No interactivo.
- Completed: Paso que el usuario ya finalizó. Puede ser clickeable para volver a editar.
- Rest
- Hovered
- Focused
- Pressed
- Started: Paso donde el usuario ya ingresó, pero aún no completó. Interacción posible.
- Rest
- Hovered
- Focused
- Pressed
- Pending: Paso que aún no fue iniciado por el usuario. No interactivo.
✅ Do
- Utilizar el Stepper para dividir un proceso en pasos secuenciales claros y con lógica progresiva.
- Mantener una cantidad entre 3 y 5 pasos para garantizar claridad y foco.
- Escribir labels breves y orientados a la acción para cada paso.
- En desktop, utilizar el Stepper con el contenedor Card.Stepper, ocupando el ancho total del contenedor.
- En mobile, utilizar el Stepper sin contenedor, ocupando el ancho total de la pantalla.
- En mobile, solo mostrar el label correspondiente al paso actual.
❌ Don't
- No usar el componente si el flujo tiene menos de 3 pasos o no implica progresión clara.
- No usar si el usuario no puede editar los pasos.
- No exceder los 5 pasos visibles.
Aplicación
Desktop
Mobile
- Text - Para mostrar el contenido de cada paso.
- Icon - Para indicadores visuales de estado.
Instalá el componente via terminal.
npm install @nimbus-ds/stepperAdditional props are passed to the <Stepper> element. See div docs for a list of props accepted by the <Stepper> element.
Stepper
| Name | Type | Default | Description |
|---|---|---|---|
activeStep* | number | The currently active step (0-based index). Steps before this will be marked as completed. | |
children* | React.ReactNode | The content of the stepper (StepperItem components). Total steps will be calculated automatically based on the number of children. | |
selectedStep* | number | The currently selected step (0-based index). This step will be visually highlighted to show user selection. | |
onSelectStep* | object | Callback called when a step is selected. Receives the step number (0-based index) as parameter. |
Stepper.Item
| Name | Type | Default | Description |
|---|---|---|---|
step* | number | The step number (0-based index) for this item. This is automatically assigned by the parent Stepper component. | |
label | string | The label text to display for this step |
Stepper.Card
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content to be rendered inside the card container |