Steps Component

The Steps component provides a visual indicator for multi-step processes, showing completed, current, and pending steps with connecting lines.

Basic Usage

Define steps as an array of strings and specify the current step number:

<x-steps 
    :steps="[
        'Create an account',
        'Select a plan',
        'Checkout',
        'Get started'
    ]"
    :current="2"
/>
  2. 2
  3. 3
  4. 4

Props

Prop Type Default Description
steps array [] Array of step labels as strings
current int 1 The current active step number (1-based index)

References

Category Path / Name Description
Component resources/views/components/steps.blade.php Steps component file

For the detailed documentation, please visit the Penguin UI Steps.