# Source: https://dev.writer.com/components/step.md

# Step

A container component that displays its child components as a step inside a Step container.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=951225f2bbc297f6ff353dfa346a7cd4" data-og-width="1184" width="1184" data-og-height="234" height="234" data-path="framework/public/components/step.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=280&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=91638a16dcfa2f75a5fd6b8eee5da5f2 280w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=560&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=dc1cc81acb3f2d02ae15702be0860f56 560w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=840&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=8a640b8c31972fa2c2adf69a14761a68 840w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=1100&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=c99565eb02fa3ebcdbf77e62810f56b2 1100w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=1650&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=e782abc28025a3d4609eadec8e9cac27 1650w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/step.png?w=2500&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=b64c8040d66ca2ab3af8da8916dd9bec 2500w" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Name</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Padding</td>
      <td>Padding</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Completed</td>
      <td>Boolean</td>
      <td>Use a state reference to dynamically mark this step as complete.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Content alignment (H)</td>
      <td>Align (H)</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>