Insites Docs Web Components V2LayoutSteps

Steps

Last updated on August 02, 2024.

Element: <ins-steps>

Renders a sequence of steps that can guide users through the task.

Complete Example

Code Snippet

<ins-steps>

  <ins-step 
    description="Shipping">
  </ins-step>

  <ins-step 
    description="Payment">
  </ins-step>

  <ins-step 
    description="Summary">
   </ins-step>

</ins-steps>
Default State

Code Snippet

<ins-steps>

  <ins-step></ins-step>

  <ins-step></ins-step>

  <ins-step></ins-step>

</ins-steps>
Number Indicator State

Code Snippet

<ins-steps 
  indicator="number">

  <ins-step></ins-step>

  <ins-step></ins-step>

  <ins-step></ins-step>

</ins-steps>
Complete and Active State

Code Snippet

<ins-steps>
  <ins-step complete></ins-step>
  <ins-step active></ins-step>
  <ins-step></ins-step>
</ins-steps>
Inline State

Code Snippet

<ins-steps 
  inline>

  <ins-step 
    
    complete description="Shipping">
  </ins-step>

  <ins-step 
    active 
    description="Payment">
  </ins-step>

  <ins-step 
   description="Summary">
  </ins-step>

</ins-steps>
Icons State

Code Snippet

<ins-steps>

  <ins-step 
    icon="icon-truck" 
    description="Shipping">
  </ins-step>

  <ins-step 
    icon="icon-credit-card"  
    description="Payment">
  </ins-step>

  <ins-step 
    icon="icon-clipboard" 
    description="Summary">
  </ins-step>

</ins-steps>
Errors State

Code Snippet

<ins-steps>
  
  <ins-step 
    description="Shipping" 
    active has-error>
  </ins-step>

  <ins-step 
    description="Payment" 
    complete 
    has-error>
  </ins-step>

  <ins-step 
    description="Summary" 
    has-error>
  </ins-step>

</ins-steps>
Clickable State

Code Snippet

<ins-steps 
  clickable 
  id="insStepsClickEl">

  <ins-step 
    description="Shipping">
  </ins-step>

  <ins-step 
    description="Payment">
  </ins-step>

  <ins-step 
    description="Summary">
  </ins-step>

</ins-steps>

<script>
  // Check console for event log
  insStepsClickEl.addEventListener('insClick', console.log);
</script>
API Example - Navigating through Steps

Code Snippet

<ins-steps 
  id="insStepsEl">

  <ins-step 
    description="Account">
  </ins-step>

  <ins-step 
    description="Shipping">
  </ins-step>

  <ins-step 
    description="Payment">
  </ins-step>

  <ins-step 
    description="Summary">
  </ins-step>

</ins-steps>

<div class="spacer"></div>

<ins-button 
  label="Prev" 
  solid 
  id="prevBtn" 
  disabled>
</ins-button>

<ins-button 
  label="Next" 
  solid 
  id="nextBtn">
</ins-button>

<ins-button 
  label="Go to step 2" 
  solid 
  id="goToStep2">
</ins-button>

<ins-button 
  label="Finish" 
  solid 
  id="finish">
</ins-button>

<ins-button 
  label="Start Again" 
  solid 
  id="startAgain">
</ins-button>

<script>
  let insStepsEl = document.getElementById("insStepsEl");
  let prevBtn = document.getElementById("prevBtn");
  let nextBtn = document.getElementById("nextBtn");
  let finish = document.getElementById("finish");
  let goToStep2 = document.getElementById("goToStep2");
  let startAgain = document.getElementById("startAgain");

  startAgain.addEventListener('insClick', async () => {
    insStepsEl.reset();
    prevBtn.disabled = true;
    nextBtn.disabled = false;
  });

  finish.addEventListener('insClick', () => {
    insStepsEl.finish();
    prevBtn.disabled = false;
    nextBtn.disabled = true;
  });

  goToStep2.addEventListener('insClick', () => {
    insStepsEl.setStep(2)
    prevBtn.disabled = false;
    nextBtn.disabled = false;
  });

  // Use async await when calling APIs if you are expecting a return from the API
  // Check the console to see the track
  prevBtn.addEventListener('insClick', async () => {
    nextBtn.disabled = false;
    let track = await insStepsEl.prev();
    console.log('prev', track);
    if (track.start) prevBtn.disabled = true;
  });

  nextBtn.addEventListener('insClick', async () => {
    prevBtn.disabled = false;
    let track = await insStepsEl.next();
    console.log('next', track)
    if (track.end) nextBtn.disabled = true;

    if (track.previousStep.description === "Shipping"){
      track.previousStep.hasError = true;
    }
  });
</script>

 

<ins-steps> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
indicator string - number Renders the step’s indicator as numbers
inline boolean false true, false Renders the step’s description inline with the indicators
clickable boolean false true, false Renders the steps to be clickable

 

<ins-steps> Event

 

NAME OBJECT DESCRIPTION
insClick {
start: boolean,
end: boolean,
previousStep: html node,
currentStep: html node
}		 Emits an event when steps are clickable

 

<ins-steps> API

 

NAME PARAMETERS RETURN DESCRIPTION
next - {
end: boolean,
previousStep: html_node,
currentStep: html_node
}		 This will complete the current step and activate the next step
prev - {
start: boolean,
previousStep: html_node,
currentStep: html_node
}		 This will deactivate the current step and activate the previous step
finish - true This will complete all steps and activate the last step
setStep place of step {
previousStep: html_node,
currentStep: html_node
}		 This will deactivate the current step and activate the step given in the parameter
getAllSteps - List of all ins-step elements This will return all ins-step provided.

 

<ins-step> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
icon string - Insites Font Icons Renders indicator as icons
description string - any Defines the description of the step
active boolean false true, false Defines if the step is active
complete boolean false true, false Defines if the step is completed
has-error boolean false true, false Defines if the step has an error
with-validation boolean false true, false Defines if the component should handle moving the steps or just emit an event for user validation.

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.