Stepper Content

<afp-stepper-content>

stable

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

A component to hold the content associated with a stepper item in a stepper. Displays its content when its stepper item is the active step.

Active Step Content

This content is displayed because the step content is active.

<afp-stepper-content name="step1" active>
  <b>Active Step Content</b>
  <p>This content is displayed because the step content is active.</p>
</afp-stepper-content>

<afp-stepper-content [name]="'step1'" active>
  <b>Active Step Content</b>
  <p>This content is displayed because the step content is active.</p>
</afp-stepper-content>

<AfpStepperContent name="step1" active>
  <b>Active Step Content</b>
  <p>This content is displayed because the step content is active.</p>
</AfpStepperContent>

<AfpStepperContent :name="'step1'" active>
  <b>Active Step Content</b>
  <p>This content is displayed because the step content is active.</p>
</AfpStepperContent>

Examples #

Index Matching #

The stepper automatically matches content to steps by their index order. When no name attribute is provided, the content elements are associated with steps sequentially:

Content for step 1

Content for step 2

<afp-stepper>
  <afp-stepper-item label="First"></afp-stepper-item>
  <afp-stepper-item label="Second"></afp-stepper-item>
  
  <afp-stepper-content>Content for step 1</afp-stepper-content>
  <afp-stepper-content>Content for step 2</afp-stepper-content>
</afp-stepper>

<afp-stepper>
  <afp-stepper-item [label]="'First'"></afp-stepper-item>
  <afp-stepper-item [label]="'Second'"></afp-stepper-item>
  
  <afp-stepper-content>Content for step 1</afp-stepper-content>
  <afp-stepper-content>Content for step 2</afp-stepper-content>
</afp-stepper>

<AfpStepper>
  <AfpStepperItem label="First"></AfpStepperItem>
  <AfpStepperItem label="Second"></AfpStepperItem>
  
  <AfpStepperContent>Content for step 1</AfpStepperContent>
  <AfpStepperContent>Content for step 2</AfpStepperContent>
</AfpStepper>

<AfpStepper>
  <AfpStepperItem :label="'First'"></AfpStepperItem>
  <AfpStepperItem :label="'Second'"></AfpStepperItem>
  
  <AfpStepperContent>Content for step 1</AfpStepperContent>
  <AfpStepperContent>Content for step 2</AfpStepperContent>
</AfpStepper>

Named Matching #

For explicit control over which content displays for each step, use the name attribute on stepper-content and the content attribute on stepper-item:

Review your information

Enter your details

<afp-stepper>
  <afp-stepper-item label="Personal" content="personal"></afp-stepper-item>
  <afp-stepper-item label="Review" content="review"></afp-stepper-item>
  
  <afp-stepper-content name="review">
    Review your information
  </afp-stepper-content>
  <afp-stepper-content name="personal">
    Enter your details
  </afp-stepper-content>
</afp-stepper>

<afp-stepper>
  <afp-stepper-item [label]="'Personal'" [content]="'personal'"></afp-stepper-item>
  <afp-stepper-item [label]="'Review'" [content]="'review'"></afp-stepper-item>
  
  <afp-stepper-content [name]="'review'">
    Review your information
  </afp-stepper-content>
  <afp-stepper-content [name]="'personal'">
    Enter your details
  </afp-stepper-content>
</afp-stepper>

<AfpStepper>
  <AfpStepperItem label="Personal" content="personal"></AfpStepperItem>
  <AfpStepperItem label="Review" content="review"></AfpStepperItem>
  
  <AfpStepperContent name="review">
    Review your information
  </AfpStepperContent>
  <AfpStepperContent name="personal">
    Enter your details
  </AfpStepperContent>
</AfpStepper>

<AfpStepper>
  <AfpStepperItem :label="'Personal'" :content="'personal'"></AfpStepperItem>
  <AfpStepperItem :label="'Review'" :content="'review'"></AfpStepperItem>
  
  <AfpStepperContent :name="'review'">
    Review your information
  </AfpStepperContent>
  <AfpStepperContent :name="'personal'">
    Enter your details
  </AfpStepperContent>
</AfpStepper>

Properties

Learn more about properties.

Name	Description	Reflects
`name`	The stepper content's name. Type `string`
`active`	When true, the stepper content will be shown. Type `boolean` Default `false`

Slots

Learn more about slots.

Name	Description
`default`	The default slot.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The container for the stepper content.	`::part(base)`

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-content/stepper-content.js';