Steps

Alpha

A control that allows the user to toggle between checked and not checked.

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Steps are <ol> elements with <li> children that appear in horizontal or vertical stepped order. They divide content into logical steps and communicate where a user is in a process, typically with large, easy-to-read statuses communicated with numbers and check mark icons.

Import

import {Steps} from '@fuegokit/react'

Additional styling guides and examples are coming soon. For now, explore the examples at Storybook.

Usage

<Steps size={`md`} activeStep={0}>
  <Step label={`Step 1`}>
    <Box>Step 1 content</Box>
  </Step>
  <Step label={`Step 2`}>
    <Box>Step 2 content</Box>
  </Step>
  <Step label={`Step 3`}>
    <Box>Step 3 content</Box>