Stepper

Indicador de pasos para flujos multi-etapa como wizards, formularios y procesos. Usa Alpine.js para la interactividad.

Uso básico

Resumen final.

<x-kore::stepper selected="datos">
    <x-kore::stepper.item id="datos" label="Datos personales">
        <form>Formulario de datos...</form>
    </x-kore::stepper.item>

    <x-kore::stepper.item id="direccion" label="Dirección">
        <form>Formulario de dirección...</form>
    </x-kore::stepper.item>

    <x-kore::stepper.item id="confirmar" label="Confirmación">
        Resumen final.
    </x-kore::stepper.item>
</x-kore::stepper>

<x-kore::stepper selected="datos">
    <x-kore::stepper.item id="datos" label="Datos personales">
        <form>Formulario de datos...</form>
    </x-kore::stepper.item>

    <x-kore::stepper.item id="direccion" label="Dirección">
        <form>Formulario de dirección...</form>
    </x-kore::stepper.item>

    <x-kore::stepper.item id="confirmar" label="Confirmación">
        Resumen final.
    </x-kore::stepper.item>
</x-kore::stepper>

Con pasos completados

Usa la prop status para indicar el estado de cada paso: pending, active, complete, error.

Completado.

En progreso.

Error en la validación.

Pendiente.

<x-kore::stepper selected="pago">
    <x-kore::stepper.item id="datos" label="Datos" status="complete">
        Completado.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="pago" label="Pago" status="active">
        En progreso.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="envio" label="Envío" status="error">
        Error en la validación.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="confirmar" label="Confirmar" status="pending" disabled>
        Pendiente.
    </x-kore::stepper.item>
</x-kore::stepper>

<x-kore::stepper selected="pago">
    <x-kore::stepper.item id="datos" label="Datos" status="complete">
        Completado.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="pago" label="Pago" status="active">
        En progreso.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="envio" label="Envío" status="error">
        Error en la validación.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="confirmar" label="Confirmar" status="pending" disabled>
        Pendiente.
    </x-kore::stepper.item>
</x-kore::stepper>

Variantes

Tres variantes de layout: horizontal (default), vertical y compact.

Contenido del paso 1.

Contenido del paso 2.

{{-- Vertical --}}
<x-kore::stepper variant="vertical" selected="paso1">
    <x-kore::stepper.item id="paso1" label="Paso 1" description="Primera etapa">
        Contenido del paso 1.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="paso2" label="Paso 2" description="Segunda etapa">
        Contenido del paso 2.
    </x-kore::stepper.item>
</x-kore::stepper>

{{-- Compacto --}}
<x-kore::stepper variant="compact" selected="paso2">
    <x-kore::stepper.item id="paso1" label="Datos" />
    <x-kore::stepper.item id="paso2" label="Pago" />
    <x-kore::stepper.item id="paso3" label="Confirmar" />
</x-kore::stepper>

{{-- Vertical --}}
<x-kore::stepper variant="vertical" selected="paso1">
    <x-kore::stepper.item id="paso1" label="Paso 1" description="Primera etapa">
        Contenido del paso 1.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="paso2" label="Paso 2" description="Segunda etapa">
        Contenido del paso 2.
    </x-kore::stepper.item>
</x-kore::stepper>

{{-- Compacto --}}
<x-kore::stepper variant="compact" selected="paso2">
    <x-kore::stepper.item id="paso1" label="Datos" />
    <x-kore::stepper.item id="paso2" label="Pago" />
    <x-kore::stepper.item id="paso3" label="Confirmar" />
</x-kore::stepper>

Con descripciones e iconos

Agrega descripciones e iconos Lucide a cada paso.

Formulario de registro.

Formulario de pago.

Formulario de envío.

<x-kore::stepper selected="cuenta">
    <x-kore::stepper.item id="cuenta" label="Cuenta" description="Crear tu cuenta" icon="user">
        Formulario de registro.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="pago" label="Pago" description="Método de pago" icon="credit-card">
        Formulario de pago.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="envio" label="Envío" description="Dirección de entrega" icon="truck">
        Formulario de envío.
    </x-kore::stepper.item>
</x-kore::stepper>

<x-kore::stepper selected="cuenta">
    <x-kore::stepper.item id="cuenta" label="Cuenta" description="Crear tu cuenta" icon="user">
        Formulario de registro.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="pago" label="Pago" description="Método de pago" icon="credit-card">
        Formulario de pago.
    </x-kore::stepper.item>

    <x-kore::stepper.item id="envio" label="Envío" description="Dirección de entrega" icon="truck">
        Formulario de envío.
    </x-kore::stepper.item>
</x-kore::stepper>

Props

Prop	Tipo	Default	Descripción
`selected`	string\|null	null	ID del paso activo inicial
`linear`	bool	false	Fuerza navegación secuencial (no permite saltar pasos)
`variant`	string	horizontal	Variante visual: horizontal, vertical, compact

Props del item

Props

Prop	Tipo	Default	Descripción
`id`	string	requerido	Identificador único del paso
`label`	string	requerido	Título del paso
`description`	string\|null	null	Descripción breve bajo el título
`icon`	string\|null	null	Icono Lucide personalizado para el paso
`status`	string	pending	Estado: pending, active, complete, error
`disabled`	bool	false	Desactiva la interacción con el paso

En esta página

Uso básico Con pasos completados Variantes Con descripciones e iconos Props