DEV Community

Cover image for Stepper Component with RiotJS (Material Design)

Posted on

Stepper Component with RiotJS (Material Design)

This article covers creating a Riot Stepper component, using the Material Design CSS BeerCSS, and change the step when a button is clicked.

Before starting, make sure you have a base application running, or read my previous article Setup Riot + BeerCSS + Vite.

These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed:

Steppers display progress through a multi-step process. Users intuitively know where they are in the process and how many steps remain, for instance, a checkout flow, login, or a form.

Image description

Stepper Component Base

The goal is to create a Riot app with a Stepper that shows a progression when a button is clicked and prints the corresponding page.

GIF of a Stepper made with RiotJS and BeerCSS

Open the index.riot file at the root of your Vite project, then add the following code. The HTML comes from the BeerCSS documentation and I added RiotJS syntax for the logic:

    <div style="width:800px;padding:20px;">
        <nav class="scroll">
            <button class="circle small"  onclick={ () => changeStep(1)}>
                <template if={ === 1 }>1</template>
                <i if={ > 1}>done</i>
            <div class="max divider"></div>
            <button class="circle small" disabled={ < 2 } onclick={ () => changeStep(2)}>
                <template if={ <= 2 }>2</template>
                <i if={ > 2}>done</i>
            <div class="max divider"></div>
            <button class="circle small" disabled={ < 3 } onclick={ () => changeStep(3)}>
                <template if={ <= 3 }>3</template>
                <i if={ > 3}>done</i>
        <div class="page padding { === 1 ? 'active' : null}" if={ === 1 }>
            <h5>Page { }</h5><br>
            <button onclick={ () => { changeStep(2) }}>Next</button>
        <div class="page padding { === 2 ? 'active' : null}" if={ === 2 }>
            <h5>Page { }</h5><br>
            <button onclick={ () => { changeStep(3) }}>Next</button>
        <div class="page padding { === 3 ? 'active' : null}" if={ === 3 }>
            <h5>Page { }</h5><br>
            <button onclick={ () => { changeStep(4) }}>Next</button>
        <div class="page padding { === 4 ? 'active' : null}" if={ === 4 }>
        export default {
            state: {
                active: 1,
            changeStep(value) {
                    active: value
Enter fullscreen mode Exit fullscreen mode

Source Code:

Let's break down the code:

  1. The Stepper is made of Buttons and Dividers, the state of a step is defined by:
    • Completed: when the checked icon is displayed and the number is hidden with <template if={ === 1 }>1</template>.
    • Completing: when the number is displayed and the checked icon is hidden with <i if={ > 1}>done</i>.
    • Next Step upcoming: when the button is disabled with the condition disabled={ < 2 }
  2. The state of the Stepper is stored into a state:{} Riot Object under the value.
  3. The will print pages 1, 2 or 3 with the expression <div class="page padding" if={ === 1 }>.
  4. If one of the step buttons is clicked, it will directly update with the selected step number: The function changeStep is fired when the event "Click" is caught, such as: onclick={ () => changeStep(1)}. Changing the step can be used to request an API and then load a specific page.

Stepper Component Testing

It exists two methods for testing the Stepper component, and it is covered in two different articles:


Voilà 🎉 We made a Stepper Riot Component using Material Design elements with BeerCSS.

Feel free to comment if you have questions or need help with RiotJS.

Have a great day! Cheers 🍻

Top comments (0)