---
title: Process flow step
sidebar: true
sidebarDepth: 2
---

# Process flow step

Process flow step

## Usage

<hy-process-flow-box class="box"
  variant="small"
  box-number="1"
  box-title="Step title"
  box-description="Step description"
  intermediate-step-title="Next step"
  step-state="first"
/>

```
<hy-process-flow-box class="box"
  variant="small"
  box-number="1"
  box-title="Step title"
  box-description="Step description"
  intermediate-step-title="Next step"
  step-state="first"
/>
```

<!-- Auto Generated Below -->

## Properties

| Property                | Attribute                 | Description | Type                                                             | Default                          |
| ----------------------- | ------------------------- | ----------- | ---------------------------------------------------------------- | -------------------------------- |
| `boxDescription`        | `box-description`         |             | `string`                                                         | `undefined`                      |
| `boxNumber`             | `box-number`              |             | `string`                                                         | `undefined`                      |
| `boxTitle`              | `box-title`               |             | `string`                                                         | `undefined`                      |
| `intermediateStepTitle` | `intermediate-step-title` |             | `string`                                                         | `''`                             |
| `numberTerm`            | `number-term`             |             | `string`                                                         | `undefined`                      |
| `stepState`             | `step-state`              |             | `"default" \| "first"`                                           | `'default'`                      |
| `variant`               | `variant`                 |             | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |

## Dependencies

### Used by

- [hy-process](../process)

### Graph

```mermaid
graph TD;
  hy-process --> hy-process-flow-box
  style hy-process-flow-box fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System