Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Step List

Usage notes

Step lists hold a collection of steps.

Default


        <coral-steplist>
          <coral-step>Step 1</coral-step>
          <coral-step>Step 2</coral-step>
          <coral-step>Step 3</coral-step>
        </coral-steplist>

Single Step

Toggle markup


        <coral-steplist interaction="on">
          <coral-step>Step 1</coral-step>
        </coral-steplist>

Selectable Steps


        <coral-steplist interaction="on">
          <coral-step>Step 1</coral-step>
          <coral-step selected="">Step 2</coral-step>
          <coral-step>Step 3</coral-step>
        </coral-steplist>

Small Size


        <coral-steplist size="S" interaction="on">
          <coral-step>Step 1</coral-step>
          <coral-step selected="">Step 2</coral-step>
          <coral-step>Step 3</coral-step>
          <coral-step>Step 4</coral-step>
          <coral-step>Step 5</coral-step>
        </coral-steplist>

Long Text

completed:

My text is the longest among all

current:

And my text is quite long too

not completed:

My text is short

Toggle markup


        <coral-steplist interaction="on">
          <coral-step>My text is the longest among all</coral-step>
          <coral-step selected="">And my text is quite long too</coral-step>
          <coral-step>My text is short</coral-step>
        </coral-steplist>

Disabled not completed items


        <coral-steplist interaction="on">
          <coral-step>Step 1</coral-step>
          <coral-step selected="">Step 2</coral-step>
          <coral-step disabled="">Step 3</coral-step>
          <coral-step disabled="">Step 4</coral-step>
          <coral-step disabled="">Step 5</coral-step>
        </coral-steplist>

labelled, labelledBy and describedBy

completed:

current:

not completed:

Step 2 heading

Step 2 content

Toggle markup


        <coral-steplist size="S" interaction="on" id="labelled-steps-example">
          <coral-step labelled="Step 1"></coral-step>
          <coral-step labelled="Step 2" labelledby="labelled-steps-example-label" describedby="labelled-steps-example-desc" selected=""></coral-step>
          <coral-step labelled="Step 3"></coral-step>
          <coral-step labelled="Step 4"></coral-step>
          <coral-step labelled="Step 5"></coral-step>
        </coral-steplist>
        <div class="coral-Well">
          <h3><span id="labelled-steps-example-label">Step 2</span> heading</h3>
          <p id="labelled-steps-example-desc"><span>Step 2</span> content</p>
        </div>
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var stepList = document.getElementById('labelled-steps-example');
            var spans = stepList.nextElementSibling.querySelectorAll('span');
            function onStepListChange(event) {
              var stepLabel = event.detail.selection.getAttribute('labelled');
              for (var i = 0; i < spans.length; i++) {
                spans[i].textContent = stepLabel;
              }
              event.detail.oldSelection.removeAttribute('labelledby');
              event.detail.selection.setAttribute('labelledby', stepList.id + '-label');
              event.detail.oldSelection.removeAttribute('describedby');
              event.detail.selection.setAttribute('describedby', stepList.id + '-desc');
            }
            stepList.addEventListener('coral-steplist:change', onStepListChange);
          });
        </script>