Stepper Item

<afp-stepper-item>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A stepper-item component to be used as a child of afp-stepper.

The afp-stepper-item component represents a single step in a stepper process. Steps are child elements of afp-stepper and manage their own visual state and interactions.

<afp-stepper-item></afp-stepper-item>

<afp-stepper-item></afp-stepper-item>

<AfpStepperItem></AfpStepperItem>

<AfpStepperItem></AfpStepperItem>

Examples #

Variants #

Use the variant attribute to set the step's semantic variant.

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-stepper-item variant="brand" number="1"></afp-stepper-item>
    <afp-stepper-item variant="brand" number="2" active></afp-stepper-item>
    <afp-stepper-item variant="brand" number="3" completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item variant="success" number="1"></afp-stepper-item>
    <afp-stepper-item variant="success" number="2" active></afp-stepper-item>
    <afp-stepper-item variant="success" number="3" completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item variant="error" number="1"></afp-stepper-item>
    <afp-stepper-item variant="error" number="2" active></afp-stepper-item>
    <afp-stepper-item variant="error" number="3" completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item variant="warning" number="1"></afp-stepper-item>
    <afp-stepper-item variant="warning" number="2" active></afp-stepper-item>
    <afp-stepper-item variant="warning" number="3" completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item variant="info" number="1"></afp-stepper-item>
    <afp-stepper-item variant="info" number="2" active></afp-stepper-item>
    <afp-stepper-item variant="info" number="3" completed></afp-stepper-item>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-stepper-item [variant]="'brand'" [number]=1></afp-stepper-item>
    <afp-stepper-item [variant]="'brand'" [number]=2 active></afp-stepper-item>
    <afp-stepper-item [variant]="'brand'" [number]=3 completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item [variant]="'success'" [number]=1></afp-stepper-item>
    <afp-stepper-item [variant]="'success'" [number]=2 active></afp-stepper-item>
    <afp-stepper-item [variant]="'success'" [number]=3 completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item [variant]="'error'" [number]=1></afp-stepper-item>
    <afp-stepper-item [variant]="'error'" [number]=2 active></afp-stepper-item>
    <afp-stepper-item [variant]="'error'" [number]=3 completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item [variant]="'warning'" [number]=1></afp-stepper-item>
    <afp-stepper-item [variant]="'warning'" [number]=2 active></afp-stepper-item>
    <afp-stepper-item [variant]="'warning'" [number]=3 completed></afp-stepper-item>
  </div>
  <div class="afp-cluster">
    <afp-stepper-item [variant]="'info'" [number]=1></afp-stepper-item>
    <afp-stepper-item [variant]="'info'" [number]=2 active></afp-stepper-item>
    <afp-stepper-item [variant]="'info'" [number]=3 completed></afp-stepper-item>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpStepperItem variant="brand" number="1"></AfpStepperItem>
    <AfpStepperItem variant="brand" number="2" active></AfpStepperItem>
    <AfpStepperItem variant="brand" number="3" completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem variant="success" number="1"></AfpStepperItem>
    <AfpStepperItem variant="success" number="2" active></AfpStepperItem>
    <AfpStepperItem variant="success" number="3" completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem variant="error" number="1"></AfpStepperItem>
    <AfpStepperItem variant="error" number="2" active></AfpStepperItem>
    <AfpStepperItem variant="error" number="3" completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem variant="warning" number="1"></AfpStepperItem>
    <AfpStepperItem variant="warning" number="2" active></AfpStepperItem>
    <AfpStepperItem variant="warning" number="3" completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem variant="info" number="1"></AfpStepperItem>
    <AfpStepperItem variant="info" number="2" active></AfpStepperItem>
    <AfpStepperItem variant="info" number="3" completed></AfpStepperItem>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpStepperItem :variant="'brand'" :number=1></AfpStepperItem>
    <AfpStepperItem :variant="'brand'" :number=2 active></AfpStepperItem>
    <AfpStepperItem :variant="'brand'" :number=3 completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem :variant="'success'" :number=1></AfpStepperItem>
    <AfpStepperItem :variant="'success'" :number=2 active></AfpStepperItem>
    <AfpStepperItem :variant="'success'" :number=3 completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem :variant="'error'" :number=1></AfpStepperItem>
    <AfpStepperItem :variant="'error'" :number=2 active></AfpStepperItem>
    <AfpStepperItem :variant="'error'" :number=3 completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem :variant="'warning'" :number=1></AfpStepperItem>
    <AfpStepperItem :variant="'warning'" :number=2 active></AfpStepperItem>
    <AfpStepperItem :variant="'warning'" :number=3 completed></AfpStepperItem>
  </div>
  <div class="afp-cluster">
    <AfpStepperItem :variant="'info'" :number=1></AfpStepperItem>
    <AfpStepperItem :variant="'info'" :number=2 active></AfpStepperItem>
    <AfpStepperItem :variant="'info'" :number=3 completed></AfpStepperItem>
  </div>
</div>

Shapes #

Use the shape attribute to set the step's shape. The default shape is pill.

Pill

Rounded

Soft

Square

<div class="afp-cluster">
  <afp-stepper-item shape="pill" number="1">Pill</afp-stepper-item>
  <afp-stepper-item shape="rounded" number="2">Rounded</afp-stepper-item>
  <afp-stepper-item shape="soft" number="3">Soft</afp-stepper-item>
  <afp-stepper-item shape="square" number="4">Square</afp-stepper-item>
</div>

<div class="afp-cluster">
  <afp-stepper-item [shape]="'pill'" [number]=1>Pill</afp-stepper-item>
  <afp-stepper-item [shape]="'rounded'" [number]=2>Rounded</afp-stepper-item>
  <afp-stepper-item [shape]="'soft'" [number]=3>Soft</afp-stepper-item>
  <afp-stepper-item [shape]="'square'" [number]=4>Square</afp-stepper-item>
</div>

<div class="afp-cluster">
  <AfpStepperItem shape="pill" number="1">Pill</AfpStepperItem>
  <AfpStepperItem shape="rounded" number="2">Rounded</AfpStepperItem>
  <AfpStepperItem shape="soft" number="3">Soft</AfpStepperItem>
  <AfpStepperItem shape="square" number="4">Square</AfpStepperItem>
</div>

<div class="afp-cluster">
  <AfpStepperItem :shape="'pill'" :number=1>Pill</AfpStepperItem>
  <AfpStepperItem :shape="'rounded'" :number=2>Rounded</AfpStepperItem>
  <AfpStepperItem :shape="'soft'" :number=3>Soft</AfpStepperItem>
  <AfpStepperItem :shape="'square'" :number=4>Square</AfpStepperItem>
</div>

Sizes #

Use the size attribute to set the step's size. The default size is medium.

Small

Medium

Large

<div class="afp-cluster afp-align-center">
  <afp-stepper-item size="small" number="1">Small</afp-stepper-item>
  <afp-stepper-item size="medium" number="2">Medium</afp-stepper-item>
  <afp-stepper-item size="large" number="3">Large</afp-stepper-item>
</div>

<div class="afp-cluster afp-align-center">
  <afp-stepper-item [size]="'small'" [number]=1>Small</afp-stepper-item>
  <afp-stepper-item [size]="'medium'" [number]=2>Medium</afp-stepper-item>
  <afp-stepper-item [size]="'large'" [number]=3>Large</afp-stepper-item>
</div>

<div class="afp-cluster afp-align-center">
  <AfpStepperItem size="small" number="1">Small</AfpStepperItem>
  <AfpStepperItem size="medium" number="2">Medium</AfpStepperItem>
  <AfpStepperItem size="large" number="3">Large</AfpStepperItem>
</div>

<div class="afp-cluster afp-align-center">
  <AfpStepperItem :size="'small'" :number=1>Small</AfpStepperItem>
  <AfpStepperItem :size="'medium'" :number=2>Medium</AfpStepperItem>
  <AfpStepperItem :size="'large'" :number=3>Large</AfpStepperItem>
</div>

Active #

Use the active attribute to indicate the current step in the process.

<afp-stepper-item active></afp-stepper-item>

<afp-stepper-item active></afp-stepper-item>

<AfpStepperItem active></AfpStepperItem>

<AfpStepperItem active></AfpStepperItem>

Label #

Use the label attribute to provide a descriptive label for the step.

Label

<afp-stepper-item>Label</afp-stepper-item>

<afp-stepper-item>Label</afp-stepper-item>

<AfpStepperItem>Label</AfpStepperItem>

<AfpStepperItem>Label</AfpStepperItem>

Custom Number #

Use the number attribute to set a custom number for the step. By default, the step number is determined by its position within the afp-stepper, but you can override this with a custom value.

Step 1

Step 2

Step 24

<div class="afp-cluster">
  <afp-stepper-item number="1" active>Step 1</afp-stepper-item>
  <afp-stepper-item number="2" active>Step 2</afp-stepper-item>
  <afp-stepper-item number="24" active>Step 24</afp-stepper-item>
</div>

<div class="afp-cluster">
  <afp-stepper-item [number]=1 active>Step 1</afp-stepper-item>
  <afp-stepper-item [number]=2 active>Step 2</afp-stepper-item>
  <afp-stepper-item [number]=24 active>Step 24</afp-stepper-item>
</div>

<div class="afp-cluster">
  <AfpStepperItem number="1" active>Step 1</AfpStepperItem>
  <AfpStepperItem number="2" active>Step 2</AfpStepperItem>
  <AfpStepperItem number="24" active>Step 24</AfpStepperItem>
</div>

<div class="afp-cluster">
  <AfpStepperItem :number=1 active>Step 1</AfpStepperItem>
  <AfpStepperItem :number=2 active>Step 2</AfpStepperItem>
  <AfpStepperItem :number=24 active>Step 24</AfpStepperItem>
</div>

Connector #

Use the connector attribute to display a connector line between steps. The connector will only be visible if the step is not the last child of afp-stepper.

Step 1

Step 2

Step 3

<div class="afp-cluster">
  <afp-stepper-item number="1" connector>Step 1</afp-stepper-item>
  <afp-stepper-item number="2" connector>Step 2</afp-stepper-item>
  <afp-stepper-item number="3">Step 3</afp-stepper-item>
</div>

<div class="afp-cluster">
  <afp-stepper-item [number]=1 connector>Step 1</afp-stepper-item>
  <afp-stepper-item [number]=2 connector>Step 2</afp-stepper-item>
  <afp-stepper-item [number]=3>Step 3</afp-stepper-item>
</div>

<div class="afp-cluster">
  <AfpStepperItem number="1" connector>Step 1</AfpStepperItem>
  <AfpStepperItem number="2" connector>Step 2</AfpStepperItem>
  <AfpStepperItem number="3">Step 3</AfpStepperItem>
</div>

<div class="afp-cluster">
  <AfpStepperItem :number=1 connector>Step 1</AfpStepperItem>
  <AfpStepperItem :number=2 connector>Step 2</AfpStepperItem>
  <AfpStepperItem :number=3>Step 3</AfpStepperItem>
</div>

Disabled #

Use the disabled attribute to disable a step, indicating that it is not available for interaction.

Disabled

<afp-stepper-item disabled>Disabled</afp-stepper-item>

<afp-stepper-item disabled>Disabled</afp-stepper-item>

<AfpStepperItem disabled>Disabled</AfpStepperItem>

<AfpStepperItem disabled>Disabled</AfpStepperItem>

Completed #

Use the completed attribute to indicate that a step has been completed.

Completed

<afp-stepper-item completed>Completed</afp-stepper-item>

<afp-stepper-item completed>Completed</afp-stepper-item>

<AfpStepperItem completed>Completed</AfpStepperItem>

<AfpStepperItem completed>Completed</AfpStepperItem>

Invalid #

Use the invalid attribute to indicate that a step has an error.

Step 1

<afp-stepper-item invalid="Invalid input">Step 1</afp-stepper-item>

<afp-stepper-item [invalid]="'Invalid input'">Step 1</afp-stepper-item>

<AfpStepperItem invalid="Invalid input">Step 1</AfpStepperItem>

<AfpStepperItem :invalid="'Invalid input'">Step 1</AfpStepperItem>

Properties

Learn more about properties.

Name Description Reflects

index

Index of the step in the stepper

Type number

Default 0

number

Custom number to display in the step button If not provided, the step index + 1 will be used

Type number | undefined

variant

The variant of the step button

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

shape

Shape of the step

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.PILL

size

Size of the step

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

connector

indiacates whether to show connector or not

Type boolean

Default false

active

active indicates whether the step is currently active.

Type boolean

Default false

disabled

disabled indicates whether the step is disabled and cannot be interacted with.

Type boolean

Default false

completed

completed indicates whether the step has been completed.

Type boolean

Default false

invalid

error indicates whether the step has a validation error.

Type string

Default ''

content

The name of the stepper content associated with this stepper item. Used to link this stepper item with its corresponding afp-stepper-content.

Type string

Default ''

orientation

Orientation of the stepper

Type

AfpOrientation

Name	Description
`HORIZONTAL`	Horizontal layout orientation.
`VERTICAL`	Vertical layout orientation.

AfpOrientation

Default AfpOrientation.HORIZONTAL

Events

Learn more about events.

Name	Return	Description
`afp-select`	`number`	Emitted when the step is selected, with the step index as detail.

Slots

Learn more about slots.

Name	Description
`default`	The default slot for step content.
`completed-icon`	The slot for a custom completed icon when the step is marked as completed.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The base element of the step.	`::part(base)`
`step-header`	The header element containing the step button and label.	`::part(step-header)`
`step-header-wrapper`	The wrapper around the step button and label for layout purposes.	`::part(step-header-wrapper)`
`step-header-button`	The button element representing the step.	`::part(step-header-button)`
`step-header-completed-icon`	The icon displayed when the step is completed.	`::part(step-header-completed-icon)`
`step-header-number`	The number displayed in the step button when not completed.	`::part(step-header-number)`
`step-label`	The container for the step label and error message.	`::part(step-label)`
`content`	The slot for the step label content.	`::part(content)`
`invalid`	The error message displayed when the step is invalid.	`::part(invalid)`
`step-connector`	The connector line between steps when `connector` is true.	`::part(step-connector)`

CSS Custom Properties

Name	Description	Default
`--afp-stepper-item-inactive-color`	The color of inactive steps and connectors.	`--afp-color-text`
`--afp-stepper-item-connector-color`	The color of the connector lines.	`--afp-color-base-500`
`--afp-stepper-item-connector-thickness`	The thickness of connector lines.	`--afp-border-width-s`
`--afp-stepper-item-vertical-label-width`	The width of step labels in vertical orientation.	`--afp-size-3xl`
`--afp-stepper-item-connector-height`	The height of connector lines.	`2px`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-button	`step-header-button` - The button element representing the step.
afp-icon	`step-header-completed-icon` - The icon displayed when the step is completed.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/stepper-item/stepper-item.js';