Stepper

<afp-stepper>

experimental

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

A stepper component displays a sequence of steps in a process. Steps are defined as afp-stepper-item child elements, and content is provided through afp-stepper-content components. Content can be linked by index (default) or by explicit name matching.

Details

Finances

Review

Provide your personal information including name, date of birth, and address.

Enter your employment status, monthly income, and existing financial obligations.

Review your loan summary, monthly installment, and confirm submission.

<afp-stepper>
  <afp-stepper-item>Details</afp-stepper-item>
  <afp-stepper-item>Finances</afp-stepper-item>
  <afp-stepper-item>Review</afp-stepper-item>

  <afp-stepper-content>Provide your personal information including name, date of birth, and address.</afp-stepper-content>
  <afp-stepper-content>Enter your employment status, monthly income, and existing financial obligations.</afp-stepper-content>
  <afp-stepper-content>Review your loan summary, monthly installment, and confirm submission.</afp-stepper-content>
</afp-stepper>

<afp-stepper>
  <afp-stepper-item>Details</afp-stepper-item>
  <afp-stepper-item>Finances</afp-stepper-item>
  <afp-stepper-item>Review</afp-stepper-item>

  <afp-stepper-content>Provide your personal information including name, date of birth, and address.</afp-stepper-content>
  <afp-stepper-content>Enter your employment status, monthly income, and existing financial obligations.</afp-stepper-content>
  <afp-stepper-content>Review your loan summary, monthly installment, and confirm submission.</afp-stepper-content>
</afp-stepper>

<AfpStepper>
  <AfpStepperItem>Details</AfpStepperItem>
  <AfpStepperItem>Finances</AfpStepperItem>
  <AfpStepperItem>Review</AfpStepperItem>

  <AfpStepperContent>Provide your personal information including name, date of birth, and address.</AfpStepperContent>
  <AfpStepperContent>Enter your employment status, monthly income, and existing financial obligations.</AfpStepperContent>
  <AfpStepperContent>Review your loan summary, monthly installment, and confirm submission.</AfpStepperContent>
</AfpStepper>

<AfpStepper>
  <AfpStepperItem>Details</AfpStepperItem>
  <AfpStepperItem>Finances</AfpStepperItem>
  <AfpStepperItem>Review</AfpStepperItem>

  <AfpStepperContent>Provide your personal information including name, date of birth, and address.</AfpStepperContent>
  <AfpStepperContent>Enter your employment status, monthly income, and existing financial obligations.</AfpStepperContent>
  <AfpStepperContent>Review your loan summary, monthly installment, and confirm submission.</AfpStepperContent>
</AfpStepper>

Examples #

Horizontal #

The default stepper is horizontal, displaying steps in a row with content appearing below the steps.

Personal

Address

Review

Please enter your full name, email address and phone number

+49

Please enter your residential address.

Review your information before submitting.

<afp-stepper>
  <afp-stepper-item>Personal</afp-stepper-item>
  <afp-stepper-item>Address</afp-stepper-item>
  <afp-stepper-item>Review</afp-stepper-item>
  
  <afp-stepper-content>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="First Name"></afp-input>
      <afp-input shape="rounded" label="Last Name"></afp-input>
      <afp-input shape="rounded" label="Email" type="email" placeholder="example@adesso.de"></afp-input>
      <afp-input label="Number" type="number"><span slot="input-prefix">+49</span></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="City"></afp-input>
      <afp-input shape="rounded" label="Post Code"></afp-input>
      <afp-input shape="rounded" label="Street Address"></afp-input>
      <afp-input shape="rounded" label="House Number"></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="Full Name" value="John Doe" disabled></afp-input>
      <afp-input shape="rounded" label="Email" type="email" value="john.doe@example.com" disabled></afp-input>
      <afp-input shape="rounded" label="City" value="Berlin" disabled></afp-input>
      <afp-input shape="rounded" label="Address" value="Potsdamer Str. 123, 10785" disabled></afp-input>
    </div>
  </afp-stepper-content>
</afp-stepper>

<afp-stepper>
  <afp-stepper-item>Personal</afp-stepper-item>
  <afp-stepper-item>Address</afp-stepper-item>
  <afp-stepper-item>Review</afp-stepper-item>
  
  <afp-stepper-content>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'First Name'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Last Name'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Email'" [type]="'email'" [placeholder]="'example@adesso.de'"></afp-input>
      <afp-input [label]="'Number'" [type]="'number'"><span slot="input-prefix">+49</span></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'City'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Post Code'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Street Address'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'House Number'"></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'Full Name'" [value]="'John Doe'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Email'" [type]="'email'" [value]="'john.doe@example.com'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'City'" [value]="'Berlin'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Address'" [value]="'Potsdamer Str. 123, 10785'" disabled></afp-input>
    </div>
  </afp-stepper-content>
</afp-stepper>

<AfpStepper>
  <AfpStepperItem>Personal</AfpStepperItem>
  <AfpStepperItem>Address</AfpStepperItem>
  <AfpStepperItem>Review</AfpStepperItem>
  
  <AfpStepperContent>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="First Name"></AfpInput>
      <AfpInput shape="rounded" label="Last Name"></AfpInput>
      <AfpInput shape="rounded" label="Email" type="email" placeholder="example@adesso.de"></AfpInput>
      <AfpInput label="Number" type="number"><span slot="input-prefix">+49</span></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="City"></AfpInput>
      <AfpInput shape="rounded" label="Post Code"></AfpInput>
      <AfpInput shape="rounded" label="Street Address"></AfpInput>
      <AfpInput shape="rounded" label="House Number"></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="Full Name" value="John Doe" disabled></AfpInput>
      <AfpInput shape="rounded" label="Email" type="email" value="john.doe@example.com" disabled></AfpInput>
      <AfpInput shape="rounded" label="City" value="Berlin" disabled></AfpInput>
      <AfpInput shape="rounded" label="Address" value="Potsdamer Str. 123, 10785" disabled></AfpInput>
    </div>
  </AfpStepperContent>
</AfpStepper>

<AfpStepper>
  <AfpStepperItem>Personal</AfpStepperItem>
  <AfpStepperItem>Address</AfpStepperItem>
  <AfpStepperItem>Review</AfpStepperItem>
  
  <AfpStepperContent>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'First Name'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Last Name'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Email'" :type="'email'" :placeholder="'example@adesso.de'"></AfpInput>
      <AfpInput :label="'Number'" :type="'number'"><span slot="input-prefix">+49</span></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'City'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Post Code'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Street Address'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'House Number'"></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'Full Name'" :value="'John Doe'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Email'" :type="'email'" :value="'john.doe@example.com'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'City'" :value="'Berlin'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Address'" :value="'Potsdamer Str. 123, 10785'" disabled></AfpInput>
    </div>
  </AfpStepperContent>
</AfpStepper>

Vertical #

Use the orientation="vertical" attribute to display steps vertically. Content appears beside the steps.

Personal Information

Please enter your full name, email address and phone number

+49

Address

Please enter your residential address.

Review

Review your information before submitting.

<afp-stepper orientation="vertical">
  <afp-stepper-item content="personal"></afp-stepper-item>
  <afp-stepper-item content="address"></afp-stepper-item>
  <afp-stepper-item content="review"></afp-stepper-item>
  
  <afp-stepper-content name="personal">
    <b>Personal Information</b>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="First Name"></afp-input>
      <afp-input shape="rounded" label="Last Name"></afp-input>
      <afp-input shape="rounded" label="Email" type="email" placeholder="example@adesso.de"></afp-input>
      <afp-input label="Number" type="number"><span slot="input-prefix">+49</span></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content name="address">
    <b>Address</b>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="City"></afp-input>
      <afp-input shape="rounded" label="Post Code"></afp-input>
      <afp-input shape="rounded" label="Street Address"></afp-input>
      <afp-input shape="rounded" label="House Number"></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content name="review">
    <b>Review</b>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <afp-input shape="rounded" label="Full Name" value="John Doe" disabled></afp-input>
      <afp-input shape="rounded" label="Email" type="email" value="john.doe@example.com" disabled></afp-input>
      <afp-input shape="rounded" label="City" value="Berlin" disabled></afp-input>
      <afp-input shape="rounded" label="Address" value="Potsdamer Str. 123, 10785" disabled></afp-input>
    </div>
  </afp-stepper-content>
</afp-stepper>

<afp-stepper [orientation]="'vertical'">
  <afp-stepper-item [content]="'personal'"></afp-stepper-item>
  <afp-stepper-item [content]="'address'"></afp-stepper-item>
  <afp-stepper-item [content]="'review'"></afp-stepper-item>
  
  <afp-stepper-content [name]="'personal'">
    <b>Personal Information</b>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'First Name'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Last Name'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Email'" [type]="'email'" [placeholder]="'example@adesso.de'"></afp-input>
      <afp-input [label]="'Number'" [type]="'number'"><span slot="input-prefix">+49</span></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content [name]="'address'">
    <b>Address</b>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'City'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Post Code'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Street Address'"></afp-input>
      <afp-input [shape]="'rounded'" [label]="'House Number'"></afp-input>
    </div>
  </afp-stepper-content>
  <afp-stepper-content [name]="'review'">
    <b>Review</b>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <afp-input [shape]="'rounded'" [label]="'Full Name'" [value]="'John Doe'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Email'" [type]="'email'" [value]="'john.doe@example.com'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'City'" [value]="'Berlin'" disabled></afp-input>
      <afp-input [shape]="'rounded'" [label]="'Address'" [value]="'Potsdamer Str. 123, 10785'" disabled></afp-input>
    </div>
  </afp-stepper-content>
</afp-stepper>

<AfpStepper orientation="vertical">
  <AfpStepperItem content="personal"></AfpStepperItem>
  <AfpStepperItem content="address"></AfpStepperItem>
  <AfpStepperItem content="review"></AfpStepperItem>
  
  <AfpStepperContent name="personal">
    <b>Personal Information</b>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="First Name"></AfpInput>
      <AfpInput shape="rounded" label="Last Name"></AfpInput>
      <AfpInput shape="rounded" label="Email" type="email" placeholder="example@adesso.de"></AfpInput>
      <AfpInput label="Number" type="number"><span slot="input-prefix">+49</span></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent name="address">
    <b>Address</b>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="City"></AfpInput>
      <AfpInput shape="rounded" label="Post Code"></AfpInput>
      <AfpInput shape="rounded" label="Street Address"></AfpInput>
      <AfpInput shape="rounded" label="House Number"></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent name="review">
    <b>Review</b>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <AfpInput shape="rounded" label="Full Name" value="John Doe" disabled></AfpInput>
      <AfpInput shape="rounded" label="Email" type="email" value="john.doe@example.com" disabled></AfpInput>
      <AfpInput shape="rounded" label="City" value="Berlin" disabled></AfpInput>
      <AfpInput shape="rounded" label="Address" value="Potsdamer Str. 123, 10785" disabled></AfpInput>
    </div>
  </AfpStepperContent>
</AfpStepper>

<AfpStepper :orientation="'vertical'">
  <AfpStepperItem :content="'personal'"></AfpStepperItem>
  <AfpStepperItem :content="'address'"></AfpStepperItem>
  <AfpStepperItem :content="'review'"></AfpStepperItem>
  
  <AfpStepperContent :name="'personal'">
    <b>Personal Information</b>
    <p>Please enter your full name, email address and phone number</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'First Name'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Last Name'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Email'" :type="'email'" :placeholder="'example@adesso.de'"></AfpInput>
      <AfpInput :label="'Number'" :type="'number'"><span slot="input-prefix">+49</span></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent :name="'address'">
    <b>Address</b>
    <p>Please enter your residential address.</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'City'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Post Code'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Street Address'"></AfpInput>
      <AfpInput :shape="'rounded'" :label="'House Number'"></AfpInput>
    </div>
  </AfpStepperContent>
  <AfpStepperContent :name="'review'">
    <b>Review</b>
    <p>Review your information before submitting.</p>
    <div class="afp-cluster">
      <AfpInput :shape="'rounded'" :label="'Full Name'" :value="'John Doe'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Email'" :type="'email'" :value="'john.doe@example.com'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'City'" :value="'Berlin'" disabled></AfpInput>
      <AfpInput :shape="'rounded'" :label="'Address'" :value="'Potsdamer Str. 123, 10785'" disabled></AfpInput>
    </div>
  </AfpStepperContent>
</AfpStepper>

Use the previousStep() and nextStep() methods to navigate between steps. You can also listen for the afp-change event to synchronize external controls with the stepper's state.

Selection

Verification

Confirmation

Choose the account type that best fits your needs.

Complete identity verification and upload required documents.

Review your information and accept the terms and conditions.

Selection

Verification

Confirmation

<div class="afp-stack">
  <afp-stepper id="stepper">
    <afp-stepper-item>Selection</afp-stepper-item>
    <afp-stepper-item>Verification</afp-stepper-item>
    <afp-stepper-item>Confirmation</afp-stepper-item>

    <afp-stepper-content>Choose the account type that best fits your needs.</afp-stepper-content>
    <afp-stepper-content>Complete identity verification and upload required documents.</afp-stepper-content>
    <afp-stepper-content>Review your information and accept the terms and conditions.</afp-stepper-content>
  </afp-stepper>

  <div class="afp-split">
    <afp-button onclick="stepper.previousStep()" appearance="plain">Previous</afp-button>
    <div class="afp-cluster">
      <afp-select style="width: 200px" id="stepper-select" value="0" hidelabel>
        <afp-option value="0">Selection</afp-option>
        <afp-option value="1">Verification</afp-option>
        <afp-option value="2">Confirmation</afp-option>
      </afp-select>
      <afp-button onclick="stepper.nextStep()">Next</afp-button>
    </div>
  </div>
</div>

<script>
  const stepper = document.getElementById('stepper');
  const select = document.getElementById('stepper-select');
    
  stepper.addEventListener('afp-change', (event) => {
    select.value = event.detail.index.toString();
  });
  
  select.addEventListener('afp-select', (event) => {
    stepper.selectStep(+event.detail);
  });
</script>

<div class="afp-stack">
  <afp-stepper [id]="'stepper'">
    <afp-stepper-item>Selection</afp-stepper-item>
    <afp-stepper-item>Verification</afp-stepper-item>
    <afp-stepper-item>Confirmation</afp-stepper-item>

    <afp-stepper-content>Choose the account type that best fits your needs.</afp-stepper-content>
    <afp-stepper-content>Complete identity verification and upload required documents.</afp-stepper-content>
    <afp-stepper-content>Review your information and accept the terms and conditions.</afp-stepper-content>
  </afp-stepper>

  <div class="afp-split">
    <afp-button [onclick]="'stepper.previousStep()'" [appearance]="'plain'">Previous</afp-button>
    <div class="afp-cluster">
      <afp-select [style]="'width: 200px'" [id]="'stepper-select'" [value]=0 hidelabel>
        <afp-option [value]=0>Selection</afp-option>
        <afp-option [value]=1>Verification</afp-option>
        <afp-option [value]=2>Confirmation</afp-option>
      </afp-select>
      <afp-button [onclick]="'stepper.nextStep()'">Next</afp-button>
    </div>
  </div>
</div>

<script>
  const stepper = document.getElementById('stepper');
  const select = document.getElementById('stepper-select');
    
  stepper.addEventListener('afp-change', (event) => {
    select.value = event.detail.index.toString();
  });
  
  select.addEventListener('afp-select', (event) => {
    stepper.selectStep(+event.detail);
  });
</script>

<div class="afp-stack">
  <AfpStepper id="stepper">
    <AfpStepperItem>Selection</AfpStepperItem>
    <AfpStepperItem>Verification</AfpStepperItem>
    <AfpStepperItem>Confirmation</AfpStepperItem>

    <AfpStepperContent>Choose the account type that best fits your needs.</AfpStepperContent>
    <AfpStepperContent>Complete identity verification and upload required documents.</AfpStepperContent>
    <AfpStepperContent>Review your information and accept the terms and conditions.</AfpStepperContent>
  </AfpStepper>

  <div class="afp-split">
    <AfpButton onclick="stepper.previousStep()" appearance="plain">Previous</AfpButton>
    <div class="afp-cluster">
      <AfpSelect style="width: 200px" id="stepper-select" value="0" hidelabel>
        <AfpOption value="0">Selection</AfpOption>
        <AfpOption value="1">Verification</AfpOption>
        <AfpOption value="2">Confirmation</AfpOption>
      </AfpSelect>
      <AfpButton onclick="stepper.nextStep()">Next</AfpButton>
    </div>
  </div>
</div>

<script>
  const stepper = document.getElementById('stepper');
  const select = document.getElementById('stepper-select');
    
  stepper.addEventListener('afp-change', (event) => {
    select.value = event.detail.index.toString();
  });
  
  select.addEventListener('afp-select', (event) => {
    stepper.selectStep(+event.detail);
  });
</script>

<div class="afp-stack">
  <AfpStepper :id="'stepper'">
    <AfpStepperItem>Selection</AfpStepperItem>
    <AfpStepperItem>Verification</AfpStepperItem>
    <AfpStepperItem>Confirmation</AfpStepperItem>

    <AfpStepperContent>Choose the account type that best fits your needs.</AfpStepperContent>
    <AfpStepperContent>Complete identity verification and upload required documents.</AfpStepperContent>
    <AfpStepperContent>Review your information and accept the terms and conditions.</AfpStepperContent>
  </AfpStepper>

  <div class="afp-split">
    <AfpButton :onclick="'stepper.previousStep()'" :appearance="'plain'">Previous</AfpButton>
    <div class="afp-cluster">
      <AfpSelect :style="'width: 200px'" :id="'stepper-select'" :value=0 hidelabel>
        <AfpOption :value=0>Selection</AfpOption>
        <AfpOption :value=1>Verification</AfpOption>
        <AfpOption :value=2>Confirmation</AfpOption>
      </AfpSelect>
      <AfpButton :onclick="'stepper.nextStep()'">Next</AfpButton>
    </div>
  </div>
</div>

<script>
  const stepper = document.getElementById('stepper');
  const select = document.getElementById('stepper-select');
    
  stepper.addEventListener('afp-change', (event) => {
    select.value = event.detail.index.toString();
  });
  
  select.addEventListener('afp-select', (event) => {
    stepper.selectStep(+event.detail);
  });
</script>

Linear #

Use the linear attribute to enforce sequential step progression. Users can only proceed to the next step after it has been completed and cannot skip ahead.

Recipient

Amount

Authorize

Enter beneficiary name, IBAN, and SWIFT/BIC.

Specify transfer amount, currency, and reference.

Confirm the payment using strong customer authentication.

Complete

<div class="afp-stack">
  <afp-stepper id="linearStepper" linear>
    <afp-stepper-item>Recipient</afp-stepper-item>
    <afp-stepper-item>Amount</afp-stepper-item>
    <afp-stepper-item>Authorize</afp-stepper-item>

    <afp-stepper-content>Enter beneficiary name, IBAN, and SWIFT/BIC.</afp-stepper-content>
    <afp-stepper-content>Specify transfer amount, currency, and reference.</afp-stepper-content>
    <afp-stepper-content>Confirm the payment using strong customer authentication.</afp-stepper-content>
  </afp-stepper>
    
  <div class="afp-cluster">
    <afp-button id="linear-complete" variant="success">Complete</afp-button>
    <afp-button id="linear-prev" appearance="plain" disabled>Previous</afp-button>
    <afp-button id="linear-next" appearance="plain" disabled>Next</afp-button>
  </div>
</div>

<script>
  const linearStepper = document.getElementById('linearStepper');
  const nextButton = document.getElementById('linear-next');
  const prevButton = document.getElementById('linear-prev');
  const completeButton = document.getElementById('linear-complete');

  prevButton.addEventListener('click', () => {
    linearStepper.previousStep();
    nextButton.disabled = false;
  });

  nextButton.addEventListener('click', () => {
    linearStepper.nextStep();
    prevButton.disabled = false;
    nextButton.disabled = true;
  });

  completeButton.addEventListener('click', () => {
    linearStepper.completeStep(linearStepper.activeStep, true);
    nextButton.disabled = false;
    prevButton.disabled = false;
  });
</script>

<div class="afp-stack">
  <afp-stepper [id]="'linearStepper'" linear>
    <afp-stepper-item>Recipient</afp-stepper-item>
    <afp-stepper-item>Amount</afp-stepper-item>
    <afp-stepper-item>Authorize</afp-stepper-item>

    <afp-stepper-content>Enter beneficiary name, IBAN, and SWIFT/BIC.</afp-stepper-content>
    <afp-stepper-content>Specify transfer amount, currency, and reference.</afp-stepper-content>
    <afp-stepper-content>Confirm the payment using strong customer authentication.</afp-stepper-content>
  </afp-stepper>
    
  <div class="afp-cluster">
    <afp-button [id]="'linear-complete'" [variant]="'success'">Complete</afp-button>
    <afp-button [id]="'linear-prev'" [appearance]="'plain'" disabled>Previous</afp-button>
    <afp-button [id]="'linear-next'" [appearance]="'plain'" disabled>Next</afp-button>
  </div>
</div>

<script>
  const linearStepper = document.getElementById('linearStepper');
  const nextButton = document.getElementById('linear-next');
  const prevButton = document.getElementById('linear-prev');
  const completeButton = document.getElementById('linear-complete');

  prevButton.addEventListener('click', () => {
    linearStepper.previousStep();
    nextButton.disabled = false;
  });

  nextButton.addEventListener('click', () => {
    linearStepper.nextStep();
    prevButton.disabled = false;
    nextButton.disabled = true;
  });

  completeButton.addEventListener('click', () => {
    linearStepper.completeStep(linearStepper.activeStep, true);
    nextButton.disabled = false;
    prevButton.disabled = false;
  });
</script>

<div class="afp-stack">
  <AfpStepper id="linearStepper" linear>
    <AfpStepperItem>Recipient</AfpStepperItem>
    <AfpStepperItem>Amount</AfpStepperItem>
    <AfpStepperItem>Authorize</AfpStepperItem>

    <AfpStepperContent>Enter beneficiary name, IBAN, and SWIFT/BIC.</AfpStepperContent>
    <AfpStepperContent>Specify transfer amount, currency, and reference.</AfpStepperContent>
    <AfpStepperContent>Confirm the payment using strong customer authentication.</AfpStepperContent>
  </AfpStepper>
    
  <div class="afp-cluster">
    <AfpButton id="linear-complete" variant="success">Complete</AfpButton>
    <AfpButton id="linear-prev" appearance="plain" disabled>Previous</AfpButton>
    <AfpButton id="linear-next" appearance="plain" disabled>Next</AfpButton>
  </div>
</div>

<script>
  const linearStepper = document.getElementById('linearStepper');
  const nextButton = document.getElementById('linear-next');
  const prevButton = document.getElementById('linear-prev');
  const completeButton = document.getElementById('linear-complete');

  prevButton.addEventListener('click', () => {
    linearStepper.previousStep();
    nextButton.disabled = false;
  });

  nextButton.addEventListener('click', () => {
    linearStepper.nextStep();
    prevButton.disabled = false;
    nextButton.disabled = true;
  });

  completeButton.addEventListener('click', () => {
    linearStepper.completeStep(linearStepper.activeStep, true);
    nextButton.disabled = false;
    prevButton.disabled = false;
  });
</script>

<div class="afp-stack">
  <AfpStepper :id="'linearStepper'" linear>
    <AfpStepperItem>Recipient</AfpStepperItem>
    <AfpStepperItem>Amount</AfpStepperItem>
    <AfpStepperItem>Authorize</AfpStepperItem>

    <AfpStepperContent>Enter beneficiary name, IBAN, and SWIFT/BIC.</AfpStepperContent>
    <AfpStepperContent>Specify transfer amount, currency, and reference.</AfpStepperContent>
    <AfpStepperContent>Confirm the payment using strong customer authentication.</AfpStepperContent>
  </AfpStepper>
    
  <div class="afp-cluster">
    <AfpButton :id="'linear-complete'" :variant="'success'">Complete</AfpButton>
    <AfpButton :id="'linear-prev'" :appearance="'plain'" disabled>Previous</AfpButton>
    <AfpButton :id="'linear-next'" :appearance="'plain'" disabled>Next</AfpButton>
  </div>
</div>

<script>
  const linearStepper = document.getElementById('linearStepper');
  const nextButton = document.getElementById('linear-next');
  const prevButton = document.getElementById('linear-prev');
  const completeButton = document.getElementById('linear-complete');

  prevButton.addEventListener('click', () => {
    linearStepper.previousStep();
    nextButton.disabled = false;
  });

  nextButton.addEventListener('click', () => {
    linearStepper.nextStep();
    prevButton.disabled = false;
    nextButton.disabled = true;
  });

  completeButton.addEventListener('click', () => {
    linearStepper.completeStep(linearStepper.activeStep, true);
    nextButton.disabled = false;
    prevButton.disabled = false;
  });
</script>

Properties

Learn more about properties.

Name Description Reflects

variant

Variant of stepper

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 stepper

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

orientation

Orientation of the stepper

Type

AfpOrientation

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

AfpOrientation

Default AfpOrientation.HORIZONTAL

linear

Whether the stepper is linear (steps must be completed in order)

Type boolean

Default false

noConnector
noconnector

Whether to show connectors between steps

Type boolean

Default false

activeStep
activestep

Index of the currently active step

Type number

Default 0

size

Size of the stepper

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

disabled

Disabled state

Type boolean

Default false

Methods

Learn more about using methods.

Name	Description	Arguments
`selectStep`	Navigate to a specific step	`stepIndex<number>` — The index of the step to navigate to
`nextStep`	Move to the next step	-
`previousStep`	Move to the previous step	-
`completeStep`	Set completion state of a step	`stepIndex<number>` — The index of the step to mark as completed `completed<boolean>` — Whether the step is completed or not

Events

Learn more about events.

Name	Return	Description
`afp-change`	`AfpStepperItem`	Emitted when the active step changes, with the new active step as detail.

Slots

Learn more about slots.

Name	Description
`default`	Default slot for afp-stepper-item children. In horizontal orientation, content appears below all steps. In vertical orientation, content appears beside the active step.

Internationalization

Learn more about internationalization.

Key	Description
`stepper.aria-label`	The aria-label for the stepper component.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`steps-column`	The column containing the steps.	`::part(steps-column)`
`content-column`	The column containing the step content.	`::part(content-column)`
`steps`	The wrapper for the steps.	`::part(steps)`
`content`	The wrapper for the step content.	`::part(content)`
`steps-wrapper`	The wrapper around the steps for layout purposes.	`::part(steps-wrapper)`
`content`	The wrapper around the step content for layout purposes.	`::part(content)`

CSS Custom Properties

Name	Description	Default
`--afp-stepper-gap`	The gap between steps and content.	`--afp-space-xs`

Dependencies

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

afp-stepper-item

afp-stepper-content

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

Stepper

Examples #

Horizontal #

Vertical #

Navigation #

Linear #

Properties

Methods

Events

Slots

Internationalization

CSS Parts

CSS Custom Properties

Dependencies

Importing