Semantic-UI Step Ordered Group

The Semantic-UI Step Ordered Group is a powerful tool for creating multi-step forms or wizards in your web applications. It allows you to group related form fields and actions together and display them in a visually appealing and logical sequence. This helps improve the user experience and increases the chances of users completing your forms successfully.

Getting Started

To use the Step Ordered Group in your web application, you will first need to include the Semantic-UI CSS and JavaScript files. You can do this by adding the following code to the head section of your HTML file:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Next, you will need to create an HTML form with the desired form fields and actions. You can use standard HTML form controls such as input, select, and textarea. You can also use Semantic-UI elements such as checkbox, radio, dropdown, and textarea.

<form class="ui form">
  <div class="ui ordered steps">
    <div class="completed step">
      <div class="content">
        <div class="title">Step 1</div>
        <div class="description">Enter your personal details</div>
      </div>
    </div>
    <div class="active step">
      <div class="content">
        <div class="title">Step 2</div>
        <div class="description">Enter your education details</div>
      </div>
      <div class="ui form">
        <div class="field">
          <label>University Name</label>
          <input type="text" name="university_name" placeholder="Enter your university name">
        </div>
        <div class="field">
          <label>Graduation Year</label>
          <input type="text" name="graduation_year" placeholder="Enter your graduation year">
        </div>
      </div>
    </div>
    <div class="disabled step">
      <div class="content">
        <div class="title">Step 3</div>
        <div class="description">Enter your work experience details</div>
      </div>
    </div>
  </div>
</form>

In the code above, we have created an HTML form with three steps. The first step is completed, the second step is active, and the third step is disabled. Each step has a title and a description, which are displayed at the top of the step. The second step contains two form fields for entering education details.

To add interactivity to the form, you can use JavaScript to change the active step, disable or enable steps, and validate form data.

Conclusion

The Semantic-UI Step Ordered Group is a powerful tool for creating multi-step forms or wizards in your web applications. It allows you to group related form fields and actions together and display them in a visually appealing and logical sequence. With its built-in support for keyboard navigation, accessibility, and animation, it provides a great user experience for your form users.