Headless Stepper

https://headless-stepper.netlify.app/
Admin
Headless Stepper is a lightweight, 100% TypeScript library with no dependencies for creating...
Tokens:11,845
Snippets:39
Trust Score:7.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Stepper Component with Mantine Example

Source: https://headless-stepper.netlify.app/sponsors

Example illustrating how to use the `Stepper` component in conjunction with Mantine UI library.

```javascript
// Example usage of Stepper component with Mantine
// (Actual code not provided in the input, this is a placeholder based on description)
```

--------------------------------

### useStepper with Chakra UI Example

Source: https://headless-stepper.netlify.app/sponsors

Example showcasing the integration of the `useStepper` hook with Chakra UI components for building a stepper.

```javascript
// Example usage of useStepper hook with Chakra UI
// (Actual code not provided in the input, this is a placeholder based on description)
```

--------------------------------

### useStepper Basic + Tailwind CSS Example

Source: https://headless-stepper.netlify.app/examples/next-chakra

A basic example demonstrating the use of the useStepper hook with Tailwind CSS for styling the stepper UI.

```jsx
import { useStepper } from 'headless-stepper';

function StepperComponent() {
  const { currentStep, nextStep, prevStep, steps } = useStepper(3);

  return (
    <div>
      <nav>
        <button onClick={prevStep} disabled={currentStep === 0}>Previous</button>
        <button onClick={nextStep} disabled={currentStep === steps - 1}>Next</button>
      </nav>
      <p>Current Step: {currentStep + 1}</p>
    </div>
  );
}
```

--------------------------------

### Basic useStepper with Tailwind CSS Example

Source: https://headless-stepper.netlify.app/sponsors

Example demonstrating the basic usage of the `useStepper` hook integrated with Tailwind CSS for styling.

```javascript
// Example usage of useStepper hook with Tailwind CSS
// (Actual code not provided in the input, this is a placeholder based on description)
```

--------------------------------

### Stepper Component + Mantine Example

Source: https://headless-stepper.netlify.app/examples/next-chakra

Demonstrates using the Stepper component from headless-stepper with Mantine UI library.

```jsx
import { Stepper } from 'headless-stepper';
import { Stepper as MantineStepper, Button } from '@mantine/core';

function MantineStepperExample() {
  return (
    <Stepper initialStep={0} steps={3}>
      {({ currentStep, nextStep, prevStep }) => (
        <MantineStepper active={currentStep} onStepClick={setStep}>
          <MantineStepper.Step label="First step">
            Content for first step
            <Button onClick={nextStep}>Next</Button>
          </MantineStepper.Step>
          <MantineStepper.Step label="Second step">
            Content for second step
            <Button onClick={prevStep} mr="sm">Previous</Button>
            <Button onClick={nextStep}>Next</Button>
          </MantineStepper.Step>
          <MantineStepper.Step label="Third step">
            Content for third step
            <Button onClick={prevStep}>Previous</Button>
          </MantineStepper.Step>
        </MantineStepper>
      )}
    </Stepper>
  );
}
```

--------------------------------

### Basic useStepper Example

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Demonstrates a basic implementation of the `useStepper` hook with Tailwind CSS for styling.

```javascript
import { useStepper } from 'headless-stepper';

function MyStepper() {
  const steps = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
  ];

  const { state, nextStep, prevStep } = useStepper({ steps });

  return (
    <div>
      <nav {...stepperProps}>
        {steps.map((step, index) => (
          <div key={index} {...stepsProps[index]}>
            {step.label}
          </div>
        ))}
      </nav>
      <p>Current Step: {state.currentStep + 1}</p>
      <button onClick={prevStep} disabled={!state.hasPreviousStep}>Previous</button>
      <button onClick={nextStep} disabled={!state.hasNextStep}>Next</button>
    </div>
  );
}
```

--------------------------------

### Basic useStepper with Tailwind CSS

Source: https://headless-stepper.netlify.app/examples/basic

Example demonstrating the basic usage of the `useStepper` hook with Tailwind CSS for styling the stepper interface.

```javascript
import { useStepper } from 'headless-stepper';
import React from 'react';

function BasicStepper() {
  const { activeStep, nextStep, prevStep, steps } = useStepper({
    initialSteps: [
      { id: '1', label: 'Step 1' },
      { id: '2', label: 'Step 2' },
      { id: '3', label: 'Step 3' },
    ],
  });

  return (
    <div>
      <nav className="flex justify-between mb-4">
        {steps.map((step, index) => (
          <button
            key={step.id}
            onClick={() => { /* handle step change */ }}
            className={`px-4 py-2 rounded ${index === activeStep ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
          >
            {step.label}
          </button>
        ))}
      </nav>
      <div className="p-4 border rounded">
        <p>Current Step: {steps[activeStep].label}</p>
        {/* Step content will go here */}
      </div>
      <div className="mt-4 flex justify-between">
        <button onClick={prevStep} disabled={activeStep === 0} className="px-4 py-2 rounded bg-gray-300">Previous</button>
        <button onClick={nextStep} disabled={activeStep === steps.length - 1} className="px-4 py-2 rounded bg-blue-500 text-white">Next</button>
      </div>
    </div>
  );
}
```

--------------------------------

### useStepper + Chakra UI Example

Source: https://headless-stepper.netlify.app/examples/next-chakra

Example of integrating the useStepper hook with Chakra UI components in a NextJS application.

```jsx
import { useStepper } from 'headless-stepper';
import { Button, Box, Text } from '@chakra-ui/react';

function ChakraStepper() {
  const { currentStep, nextStep, prevStep, steps } = useStepper(3);

  return (
    <Box>
      <Box>
        <Button onClick={prevStep} isDisabled={currentStep === 0} mr={2}>Previous</Button>
        <Button onClick={nextStep} isDisabled={currentStep === steps - 1}>Next</Button>
      </Box>
      <Text mt={4}>Current Step: {currentStep + 1}</Text>
    </Box>
  );
}
```

--------------------------------

### Stepper Component with Mantine Example

Source: https://headless-stepper.netlify.app/examples/stepper-component

Illustrates using the Stepper component with Mantine UI library for building a visually appealing stepper interface.

```JavaScript
import React from 'react';
import { Stepper, Button, Group } from '@mantine/core';
import { useStepper } from 'headless-stepper';

function MantineStepper() {
  const { activeStep, nextStep, prevStep, steps } = useStepper({
    initialStep: 0,
    steps: 3
  });

  return (
    <Stepper active={activeStep} breakpoint="sm">
      {[...Array(steps)].map((_, i) => (
        <Stepper.Step key={i} label={`Step ${i + 1}`} description={`Details for step ${i + 1}`}>
          {/* Content for step i */}
          <p>Content for Step {i + 1}</p>
        </Stepper.Step>
      ))}
    </Stepper>

    <Group position="center" mt="xl">
      <Button variant="default" onClick={prevStep} disabled={activeStep === 0}>
        Back
      </Button>
      <Button onClick={nextStep} disabled={activeStep === steps - 1}>
        Next
      </Button>
    </Group>
  );
}

export default MantineStepper;
```

--------------------------------

### Basic useStepper Example with Tailwind CSS

Source: https://headless-stepper.netlify.app/examples/stepper-component

Demonstrates a basic implementation of the useStepper hook integrated with Tailwind CSS for styling.

```JavaScript
import React from 'react';
import { useStepper } from 'headless-stepper';

function BasicStepper() {
  const { activeStep, nextStep, prevStep, steps } = useStepper({
    initialStep: 0,
    steps: 3
  });

  return (
    <div>
      <div className="flex justify-between mb-4">
        {[...Array(steps)].map((_, i) => (
          <button
            key={i}
            className={`w-8 h-8 rounded-full ${i === activeStep ? 'bg-blue-500 text-white' : 'bg-gray-300'}`}
          >
            {i + 1}
          </button>
        ))}
      </div>
      <div className="p-4 border rounded">
        Content for Step {activeStep + 1}
      </div>
      <div className="mt-4 flex justify-between">
        <button onClick={prevStep} disabled={activeStep === 0}>Previous</button>
        <button onClick={nextStep} disabled={activeStep === steps - 1}>Next</button>
      </div>
    </div>
  );
}

export default BasicStepper;
```

--------------------------------

### Stepper Component Example

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Illustrates how to use the `Stepper` component with Mantine UI for styling and layout.

```javascript
import { Stepper } from 'headless-stepper';
import { Stepper as MantineStepper, StepperCompleted } from '@mantine/core';

function MyStepperComponent() {
  const steps = [
    { label: 'Account Info' },
    { label: 'Profile Settings' },
    { label: 'Billing' },
  ];

  return (
    <MantineStepper>
      <Stepper steps={steps} />
      <StepperCompleted />
    </MantineStepper>
  );
}
```

--------------------------------

### Install Headless Stepper

Source: https://headless-stepper.netlify.app/getting-started/installation

Install the Headless Stepper library using NPM, Yarn, or PNPM. This library is compatible with React 16.8.0 and higher.

```bash
npm install headless-stepper
```

```bash
yarn add headless-stepper
```

```bash
pnpm install headless-stepper
```

--------------------------------

### useStepper with Chakra UI Example

Source: https://headless-stepper.netlify.app/examples/stepper-component

Shows how to integrate the useStepper hook with Chakra UI components for a styled stepper experience.

```JavaScript
import React from 'react';
import { useStepper } from 'headless-stepper';
import { Box, Button, HStack, Step, StepIndicator, StepNumber, StepTitle, Stepper as ChakraStepper, useSteps } from '@chakra-ui/react';

function ChakraStepperExample() {
  const { activeStep, nextStep, prevStep, steps } = useStepper({
    initialStep: 0,
    steps: 3
  });

  const { setStep } = useSteps({
    count: steps,
    initialStep: activeStep,
  });

  React.useEffect(() => {
    setStep(activeStep);
  }, [activeStep, setStep]);

  return (
    <ChakraStepper index={activeStep} colorScheme="blue" mb="5">
      {[...Array(steps)].map((_, i) => (
        <Step key={i}>
          <StepIndicator>
            <StepNumber>{i + 1}</StepNumber>
          </StepIndicator>
          <Box flexShrink='0'>
            <StepTitle>{`Step ${i + 1}`}</StepTitle>
          </Box>
        </Step>
      ))}
    </ChakraStepper>
  );
}

export default ChakraStepperExample;
```

--------------------------------

### useStepper Hook API

Source: https://headless-stepper.netlify.app/examples/next-chakra

The useStepper hook provides the core logic for managing stepper states, including current step, next/previous step functionality, and reset.

```APIDOC
useStepper(steps: number, initialStep?: number)
  - Manages the state of a stepper component.
  - Parameters:
    - steps: The total number of steps in the stepper.
    - initialStep: The initial step to set (defaults to 0).
  - Returns:
    - currentStep: The current active step index.
    - nextStep: Function to advance to the next step.
    - prevStep: Function to go back to the previous step.
    - setStep: Function to set the stepper to a specific step index.
    - reset: Function to reset the stepper to the initial step.
```

--------------------------------

### Basic Stepper UI Structure (JSX)

Source: https://headless-stepper.netlify.app/getting-started/using

A simplified JSX structure for rendering a stepper component, focusing on the navigation and step display. This example is part of the overall UI building process for the headless stepper.

```jsx
return (
  <div>
    <div>
      <nav style={{ display:'flex' }} {...stepperProps}>
        {stepsProps?.map((step, index) => (
          <ol
            key={index}
            style={{
              opacity: steps[index].disabled ?0.6:1,
              fontWeight:state.currentStep === index ?'bold':'unset',
            }}
          >
            <a {...step}>{steps[index].label}</a>
          </ol>
        ))}
      </nav>
    </div>
    <p>Current step: {state.currentStep}</p>
    <button onClick={prevStep} disabled={!state.hasPreviousStep}>
      Prev
    </button>
    <button onClick={nextStep}>Next</button>
    <div {...progressProps} />
  </div>
);
```

--------------------------------

### Using the Stepper Component

Source: https://headless-stepper.netlify.app/getting-started/using-stepper

Demonstrates how to use the `Stepper` and `Step` components to create a basic stepper with three steps. It shows how to pass props like `currentStep` and `label`, and how to disable steps.

```javascript
import { Stepper, Step } from'headless-stepper/components';
constMyAwesomeStepper= () => {
return (
    <SteppercurrentStep={0}>
      <Steplabel="Step 1">Step 1 content</Step>
      <Steplabel="Step 2"disabled>
        Step 2 content
      </Step>
      <Steplabel="Step 3">Step 3 content</Step>
    </Stepper>
  );
};
exportdefault MyAwesomeStepper;
```

```typescript
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
  return (
    <Stepper currentStep={0}>
      <Step label="Step 1">Step 1 content</Step>

      <Step label="Step 2" disabled>
        Step 2 content
      </Step>

      <Step label="Step 3">Step 3 content</Step>
    </Stepper>
  );
};

export default MyAwesomeStepper;
```

--------------------------------

### Step Component API

Source: https://headless-stepper.netlify.app/examples/basic

API reference for the `Step` component, detailing its props for rendering individual steps within the Stepper.

```APIDOC
Step component
  - Renders an individual step within the Stepper.
  - Props:
    - `index`: The index of the step.
    - `label`: The label displayed for the step.
    - `isActive`: Boolean indicating if the step is currently active.
    - `isCompleted`: Boolean indicating if the step has been completed.
    - `isErrored`: Boolean indicating if the step has an error.
```

--------------------------------

### Initialize useStepper Hook

Source: https://headless-stepper.netlify.app/getting-started/using

Illustrates two ways to initialize the `useStepper` hook: either by creating an instance of the stepper or by destructuring the returned state and control functions.

```jsx
const stepperInstance = useStepper({ steps });
```

```jsx
const { state, nextStep, prevStep, progressProps, stepsProps, stepperProps } = useStepper({ steps });
```

--------------------------------

### Step Component API

Source: https://headless-stepper.netlify.app/sponsors

API documentation for the `Step` component, detailing its role and props for defining individual steps in the stepper.

```APIDOC
Step
  - Component representing an individual step in the stepper.
  - Props:
    - `children`: Content for the step.
    - `index`: The index of the step.
```

--------------------------------

### Import useStepper Hook

Source: https://headless-stepper.netlify.app/getting-started/using

Demonstrates how to import the `useStepper` hook from the 'headless-stepper' library. This is the initial step for utilizing the library's functionality.

```javascript
import { useStepper } from'headless-stepper';
```

--------------------------------

### Stepper Component API Reference

Source: https://headless-stepper.netlify.app/examples/stepper-component

API reference for the Stepper component, outlining its props and how to integrate it into applications.

```APIDOC
Stepper({
  children: React.ReactNode;
  initialStep?: number;
  steps: number;
  ...rest
}): JSX.Element

- **Description**: A component that visually represents the steps in a process.
- **Props**: 
  - `children`: The content for each step.
  - `initialStep`: The step to be active initially (optional).
  - `steps`: The total number of steps in the stepper.
- **Usage**: Used to render the stepper UI, often in conjunction with the `useStepper` hook.
```

--------------------------------

### Custom Stepper with Mantine UI

Source: https://headless-stepper.netlify.app/getting-started/using-stepper

Demonstrates using the `as` prop to render the Stepper component as a Mantine UI Group and each Step as a Mantine UI Button. This allows for custom styling and behavior integration.

```javascript
import { Stepper, Step } from'headless-stepper/components';
import { MantineProvider, Button, Group, Container, Box } from'@mantine/core';
constMyAwesomeStepper= () => {
return (
    <MantineProviderwithGlobalStyleswithNormalizeCSS>
      <Containermt="lg">
        <Stepperas={Group} currentStep={0} className="example">
          <Stepas={Button} label="Step 1">
            <Box>Step 1 content</Box>
          </Step>
          <Stepas={Button} label="Step 2"disabled>
            Step 2 content
          </Step>
          <Stepas={Button} label="Step 3">
            Step 3 content
          </Step>
        </Stepper>
      </Container>
    </MantineProvider>
  );
};
exportdefault MyAwesomeStepper;
```

```typescript
import { Stepper, Step } from 'headless-stepper/components';
import { MantineProvider, Button, Group, Container, Box } from "@mantine/core";

const MyAwesomeStepper = () => {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Container mt="lg">
        <Stepper as={Group} currentStep={0} className="example">
          <Step as={Button} label="Step 1">
            <Box>
            Step 1 content
            </Box>
          </Step>

          <Step as={Button} label="Step 2" disabled>
            Step 2 content
          </Step>

          <Step as={Button} label="Step 3">
            Step 3 content
          </Step>
        </Stepper>
      </Container>
    </MantineProvider>
  );
};

export default MyAwesomeStepper;
```

--------------------------------

### Stepper Component API

Source: https://headless-stepper.netlify.app/examples/basic

API reference for the `Stepper` component, outlining its props for rendering and controlling the stepper UI.

```APIDOC
Stepper component
  - Renders the main stepper navigation and content.
  - Props:
    - `steps`: An array of step objects to be rendered.
    - `activeStep`: The index of the currently active step.
    - `onStepChange`: Callback function triggered when a step is changed.
    - `children`: Renders the content for the current step.
```

--------------------------------

### useStepper Hook API

Source: https://headless-stepper.netlify.app/examples/basic

API reference for the `useStepper` hook, detailing its functionality, parameters, and return values for managing stepper state.

```APIDOC
useStepper()
  - Manages the state and logic for a stepper.
  - Parameters:
    - None directly, but often used within a React component context.
  - Returns:
    - An object containing stepper state and control functions:
      - `activeStep`: The index of the currently active step.
      - `setActiveStep`: Function to programmatically set the active step.
      - `nextStep`: Function to advance to the next step.
      - `prevStep`: Function to go back to the previous step.
      - `resetSteps`: Function to reset the stepper to the initial state.
      - `steps`: An array of step objects, each with properties like `id`, `label`, etc.
```

--------------------------------

### Stepper Component API

Source: https://headless-stepper.netlify.app/sponsors

API documentation for the `Stepper` component, outlining its props and usage for rendering a stepper interface.

```APIDOC
Stepper
  - Component for rendering the stepper UI.
  - Props:
    - `children`: The Step components to render within the stepper.
```

--------------------------------

### useStepper Hook API

Source: https://headless-stepper.netlify.app/sponsors

API documentation for the `useStepper` hook, detailing its functionality, parameters, and return values for managing stepper state.

```APIDOC
useStepper()
  - Hook for managing stepper logic.
  - Returns:
    - `currentStep`: The current active step index.
    - `setStep`: Function to set the current step.
    - `nextStep`: Function to advance to the next step.
    - `prevStep`: Function to go back to the previous step.
    - `steps`: An array of all steps.
```

--------------------------------

### Step Component API Reference

Source: https://headless-stepper.netlify.app/examples/stepper-component

API reference for the Step component, detailing its role within the Stepper component and its available props.

```APIDOC
Step({
  children: React.ReactNode;
  index: number;
  ...rest
}): JSX.Element

- **Description**: Represents an individual step within the Stepper component.
- **Props**: 
  - `children`: The content of the step.
  - `index`: The index of the current step.
- **Usage**: Used to define the content and structure of each step within the `Stepper`.
```

--------------------------------

### Stepper Component API

Source: https://headless-stepper.netlify.app/index

Documentation for the Stepper component, which likely serves as a presentational wrapper or a component that utilizes the useStepper hook. It details its props and how it integrates with the stepper logic.

```APIDOC
Stepper component
  - A component that can be used to render the stepper UI.
  - Likely accepts props to control its behavior or appearance.
  - Can be used in conjunction with the useStepper hook to create a complete stepper experience.
  - Details on specific props and their functionality would be found in the full API documentation.
```

--------------------------------

### Step Component API

Source: https://headless-stepper.netlify.app/index

Documentation for the Step component, which represents an individual step within the stepper. It likely handles the rendering of content for each step and may accept props related to its state or content.

```APIDOC
Step component
  - Represents a single step within the stepper.
  - Used to display the content or UI for a specific step.
  - May accept props such as `stepNumber`, `isActive`, `isCompleted`, etc.
  - Works in conjunction with the Stepper component and useStepper hook.
```

--------------------------------

### useStepper Hook API Reference

Source: https://headless-stepper.netlify.app/examples/stepper-component

API reference for the useStepper hook, detailing its functionality, parameters, and return values for managing stepper state.

```APIDOC
useStepper(): {
  activeStep: number;
  goToStep: (step: number) => void;
  nextStep: () => void;
  prevStep: () => void;
  setSteps: (steps: number) => void;
  steps: number;
}

- **Description**: A hook for managing the state of a stepper component.
- **Returns**: An object containing the current active step, functions to navigate steps, and the total number of steps.
- **Parameters**: None directly, but manages internal state.
- **Usage**: Commonly used in React applications to control stepper flow.
```

--------------------------------

### React Headless Stepper UI Implementation

Source: https://headless-stepper.netlify.app/getting-started/using

This snippet demonstrates how to use the `useStepper` hook from the 'headless-stepper' library to build a functional stepper component in React. It includes rendering navigation steps, current step display, and navigation buttons (Prev/Next). It also shows how to display the stepper's state and the React version.

```jsx
import React from 'react';
import { useStepper } from 'headless-stepper';
interface HeadlessStepperProps {}

export default function HeadlessStepper(props: HeadlessStepperProps) {
  const steps = React.useMemo(
    () => [
      {
        label: 'Step 1',
      },
      { label: 'Step 2' },
      { label: 'Step 3' },
      { label: 'Step 4', disabled: true },
      { label: 'Step 5' },
      { label: 'Step 6' },
    ],
    []
  );
  const { state, nextStep, prevStep, progressProps, stepsProps, stepperProps } = 
    useStepper({
      steps,
    });
  return (
    <div>
      <div>
        <nav style={{ display: 'flex' }} {...stepperProps}>
          {stepsProps?.map((step, index) => (
            <ol
              key={index}
              style={{
                opacity: steps[index].disabled ? 0.6 : 1,
                fontWeight: state.currentStep === index ? 'bold' : 'unset',
              }}
            >
              <a {...step}>{steps[index].label}</a>
            </ol>
          ))}
        </nav>
      </div>
      <p>Current step: {state.currentStep}</p>
      <button onClick={prevStep} disabled={!state.hasPreviousStep}>
        Prev
      </button>
      <button onClick={nextStep} disabled={!state.hasNextStep}>Next</button>
      <div {...progressProps} />
      <p>React Version: {React.version}</p>
      <p>State:</p>
      <pre style={{backgroundColor: '#f2f2f2'}}>
        {JSON.stringify(state, null, 2)}
      </pre>
    </div>
  );
}
```

--------------------------------

### Define Stepper Steps

Source: https://headless-stepper.netlify.app/getting-started/using

Shows how to define the steps for the stepper component using `React.useMemo`. This ensures that the steps are memoized and only recalculated when they change, optimizing performance.

```jsx
const steps = React.useMemo(
  () => [
    {
      label: 'Step 1',
    },
    { label: 'Step 2' },
    { label: 'Step 3' },
    { label: 'Step 4', disabled: true },
    { label: 'Step 5' },
    { label: 'Step 6' },
  ],
  []
);
```

--------------------------------

### useStepper Hook API

Source: https://headless-stepper.netlify.app/index

Documentation for the useStepper hook, a core utility for managing stepper logic. It outlines its functionality, parameters, and usage within a React application.

```APIDOC
useStepper()
  - Provides the core logic for a stepper.
  - Allows developers to manage stepper state and transitions.
  - Designed to be used with any UI framework or styling solution.
  - Returns an object with methods to control the stepper (e.g., next, previous, jump to step).
  - Example Usage:
    import { useStepper } from 'headless-stepper';

    function MyStepper() {
      const { currentStep, nextStep, prevStep } = useStepper({
        initialStep: 0,
        steps: ['Step 1', 'Step 2', 'Step 3']
      });

      return (
        <div>
          <p>Current Step: {currentStep + 1}</p>
          <button onClick={prevStep}>Previous</button>
          <button onClick={nextStep}>Next</button>
        </div>
      );
    }
```

--------------------------------

### Step Component API Reference

Source: https://headless-stepper.netlify.app/api-reference/step

API reference for the Step component, detailing its props, their types, descriptions, and whether they are required. It extends the Steps type alias.

```APIDOC
StepComponentProps:
  Extends Steps type alias. See [Steps](https://headless-stepper.netlify.app/api-reference/useStepper#steps) documentation.

  Parameters:
    children: React.ReactNode - The content of the component.
    as: React.ElementType - The HTML tag or React component to render as. Defaults to 'button'.
    label: string - Label to display. Ex.: Step 04. Required.
    disabled: boolean - Enable/disable step.
    isValid: boolean - Check if a step is valid.
```

--------------------------------

### useStepper() Hook API

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Provides the core logic for managing stepper state and interactions. It accepts StepperProps and returns a UseStepper object containing state and control functions.

```APIDOC
useStepper(StepperProps): UseStepper

Parameters:
  steps: Steps[] - Array of step objects defining the stepper.
  currentStep: number - The currently active step index (0-based).
  orientation: StepperOrientation - ARIA orientation for the stepper.

Returns:
  stepperProps: React.HTMLAttributes<HTMLElement> - Props for the main stepper element.
  stepsProps: React.HTMLAttributes<HTMLElement>[] - Props for each step element.
  progressProps: React.HTMLAttributes<HTMLElement> - Props for the progress indicator element.
  state: StepperState - Current state of the stepper.
  nextStep(): void - Function to advance to the next step.
  prevStep(): void - Function to go to the previous step.
  setStep(step: number): void - Function to directly set the current step.
```

--------------------------------

### Stepper State Object

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Represents the current status of the stepper, including the active step, navigation availability, and IDs for accessibility.

```APIDOC
StepperState

Properties:
  currentStep: number - The index of the currently active step.
  progressId: string - Unique ID for the progress bar element.
  labelId: string - ID for associating labels with progress elements.
  hasPreviousStep: boolean - True if there is a previous step available.
  hasNextStep: boolean - True if there is a next step available.
  totalSteps: number - The total number of steps in the stepper.
```

--------------------------------

### Stepper Component Props

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Defines the structure for individual steps within the stepper, including labels, disabled states, and validity.

```APIDOC
Steps

Properties:
  label: string - The text displayed for the step (e.g., 'Step 04').
  disabled: boolean - If true, the step is not interactive.
  isValid: boolean - Indicates if the step's content is valid.
```

--------------------------------

### Stepper Component API - StepperComponentProps

Source: https://headless-stepper.netlify.app/api-reference/stepper

Defines the properties for the Stepper component, including children, current step, orientation, and the element type to render as. It specifies the types, whether they are required, and their default values.

```APIDOC
StepperComponentProps:
  children: React.ReactNode (Required) - The steps to be rendered. Must be a Step component.
  currentStep: number (Optional) - The current step of the stepper. Defaults to 0.
  orientation: StepperOrientation (Optional) - Stepper orientation, used for ARIA-ORIENTATION. Defaults to 'horizontal'.
  as: React.ElementType (Optional) - The HTML tag or React component to render as. Defaults to 'nav'.
```

--------------------------------

### StepperOrientation Type

Source: https://headless-stepper.netlify.app/api-reference/useStepper

Defines the orientation for the Stepper component, used to set ARIA attributes. Accepts 'horizontal' or 'vertical'.

```APIDOC
StepperOrientation:
  Type: string
  Possible values: 'horizontal', 'vertical'
  Description: Represents the orientation of the stepper for ARIA attributes.
```
Tokens:
Raw