---
url: /docs/components/steps/frameworks/elements.md
---
# Steps - Elements

The steps component is built to handle user journeys, showing progress.

## 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

## Examples

```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>
```

### Horizontal steps

```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>
```

### Right-aligned vertical steps

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

```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>
```

## `<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`

### `<w-step>` API

#### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| active | `boolean` | `false` | Whether this step is active. |
| completed | `boolean` | `false` | Whether this step is completed. |
| getAriaLabel (JS only) | `getAriaLabel() => void` | `-` | - |
| setContext (JS only) | `setContext(context: StepsContext) => void` | `-` | - |

#### Property Details

##### active

Whether this step is active.

The active step displays a filled indicator.

* Type: `boolean`
* Default: `false`

##### completed

Whether this step is completed.

Completed steps display a checkmark icon and a filled indicator.

* Type: `boolean`
* Default: `false`

##### getAriaLabel (JS only)

* Type: `getAriaLabel() => void`
* Default: `-`

##### setContext (JS only)

* Type: `setContext(context: StepsContext) => void`
* Default: `-`