Steps

Shows progress through a sequence of tasks with completed, active, and inactive states.

Component Code 
@php
    $steps = [
        ['value' => 1, 'label' => 'Account', 'description' => 'Create your account'],
        ['value' => 2, 'label' => 'Profile', 'description' => 'Add your details'],
        ['value' => 3, 'label' => 'Review', 'description' => 'Confirm your choices'],
    ];
@endphp
 
<april:steps :items="$steps" current="2" />

Usage

Pass an array of steps and the active step to the component. Numeric values are used by default to derive the state: steps before the active step are completed, the active step is highlighted, and later steps are inactive.

@php
    $steps = [
        ['value' => 1, 'label' => 'Account'],
        ['value' => 2, 'label' => 'Profile'],
        ['value' => 3, 'label' => 'Review'],
    ];
@endphp
 
<april:steps :items="$steps" current="2" />

Step data

Each step accepts a value, label, optional description, and optional href. A completed step with an href is rendered as a link. Use state when the state does not follow the numeric order. Supported values are completed, active, and inactive.

Vertical steps

Set orientation to vertical for a stacked layout. This works well when each step has a description or when the available width is limited.

Component Code 
@php
    $steps = [
        ['value' => 1, 'label' => 'Account', 'description' => 'Create your account', 'href' => '#account'],
        ['value' => 2, 'label' => 'Profile', 'description' => 'Add your details'],
        ['value' => 3, 'label' => 'Preferences', 'description' => 'Choose your settings'],
        ['value' => 4, 'label' => 'Review', 'description' => 'Confirm your choices'],
    ];
@endphp
 
<april:steps orientation="vertical" :items="$steps" current="2" />

<april:steps orientation="vertical" :items="$steps" current="2" />

Publishing Views

Use the following command to publish this view:

php artisan april:publish steps
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.