# StepIndicator (w-step-indicator)

## Description

Steps are used to show progress through a process or to guide users through a multi-step task.

[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)

## Usage

The steps component consists of two custom elements that work together:

- `<w-step-indicator>` - The container that manages step layout and orientation
- `<w-step>` - Individual step items within the indicator

Each `<w-step>` can be marked as `active` or `completed` to indicate progress. The `<w-step-indicator>` component automatically handles:

- Vertical and horizontal layouts
- Left and right alignment (for vertical layout)
- Visual connecting lines between steps
- ARIA attributes for accessibility

## Accessibility

## Examples

<elements-example>

```html
<w-step-indicator>
  <w-step completed>
    <p class="text-body font-bold">Step one</p>
    <p class="text-caption">This step is completed</p>
  </w-step>
  <w-step active>
    <p class="text-body font-bold">Step two</p>
    <p class="text-caption">This is the current step</p>
  </w-step>
  <w-step>
    <p class="text-body font-bold">Step three</p>
    <p class="text-caption">This step is upcoming</p>
  </w-step>
</w-step-indicator>

<script type="module">
  // Update step states programmatically
  const steps = document.querySelectorAll('w-step');

  // Mark a step as completed
  steps[0].completed = true;

  // Mark a step as active
  steps[1].active = true;
</script>
```

</elements-example>

### Horizontal steps

<elements-example>


```html
<w-step-indicator horizontal>
  <w-step completed>
    <p class="text-body font-bold">Step 1</p>
    <p class="text-caption">Completed</p>
  </w-step>
  <w-step active>
    <p class="text-body font-bold">Step 2</p>
    <p class="text-caption">In progress</p>
  </w-step>
  <w-step>
    <p class="text-body font-bold">Step 3</p>
    <p class="text-caption">Upcoming</p>
  </w-step>
</w-step-indicator>
```

</elements-example>

### Right-aligned vertical steps

`right` can not be used with `horizontal` (`horizontal` wins).

<elements-example>

```html
<w-step-indicator right>
  <w-step completed>
    <p class="text-body font-bold">Step 1</p>
    <p class="text-caption">Completed</p>
  </w-step>
  <w-step active>
    <p class="text-body font-bold">Step 2</p>
    <p class="text-caption">In progress</p>
  </w-step>
  <w-step>
    <p class="text-body font-bold">Step 3</p>
    <p class="text-caption">Upcoming</p>
  </w-step>
</w-step-indicator>
```

</elements-example>

## Styling API

## `<w-step-indicator>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| horizontal | `boolean` | `false` | Display steps horizontally instead of vertically |
| right | `boolean` | `false` | Align steps to the right (vertical layout only) |

### Property Details

#### horizontal

Display steps horizontally instead of vertically

- Type: `boolean`
- Default: `false`

#### right

Align steps to the right (vertical layout only)

- Type: `boolean`
- Default: `false`