# or
yarn add @zag-js/steps @zag-js/svelte
```

## Anatomy

To set up the steps correctly, you'll need to understand its anatomy and how we
name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the steps package into your project

```jsx
import * as steps from "@zag-js/steps"
```

The steps package exports two key functions:

- `machine` â The state machine logic for the steps widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
steps machine in your project ð¥

```svelte
<script lang="ts">
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import * as steps from "@zag-js/steps"

  const stepsData = [
    { title: "Step 1" },
    { title: "Step 2" },
    { title: "Step 3" },
  ]

  const service = useMachine(steps.machine, {
    id: "1",
    count: stepsData.length,
  })

  const api = $derived(steps.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getListProps()}>
    {#each stepsData as step, index}
      <div {...api.getItemProps({ index })}>
        <button {...api.getTriggerProps({ index })}>
          <div {...api.getIndicatorProps({ index })}>{index + 1}</div>
          <span>{step.title}</span>
        </button>
        <div {...api.getSeparatorProps({ index })} />
      </div>
    {/each}
  </div>

  {#each stepsData as step, index}
    <div {...api.getContentProps({ index })}>
      {step.title} - {step.description}
    </div>
  {/each}

  <div {...api.getContentProps({ index: stepsData.length })}>
    Steps Complete - Thank you for filling out the form!
  </div>

  <div>
    <button {...api.getPrevTriggerProps()}>Back</button>
    <button {...api.getNextTriggerProps()}>Next</button>
  </div>
</div>
```

## Setting the initial step

Set the initial step by passing the `step` property to the machine context.

> The value of the `step` property is zero-based index.

```jsx {2}
const service = useMachine(steps.machine, {
  defaultStep: 1,
})
```

## Listening for step change

When the active step changes, the machine will invoke the `onStepChange` event

```jsx {2-4}
const service = useMachine(steps.machine, {
  onStepChange(details) {
    // details => { step: number }
    console.log(`Step changed to ${details.step}`)
  },
})
```

## Listening for steps completion

When all steps are completed, the machine will invoke the `onStepComplete` event

```jsx {2-4}
const service = useMachine(steps.machine, {
  onStepComplete() {
    console.log("All steps are complete")
  },
})
```

## Enforcing linear steps

To enforce linear steps, you can set the `linear` prop to `true` when creating
the steps machine. This will prevent users from skipping steps.

```jsx {2}
const service = useMachine(steps.machine, {
  linear: true,
})
```

## Changing the orientation

The steps machine supports both horizontal and vertical orientations. You can
set the `orientation` prop to `horizontal` or `vertical` to change the
orientation of the steps.

```jsx {2}
const service = useMachine(steps.machine, {
  orientation: "vertical",
})
```

## Styling guide

Earlier, we mentioned that each steps part has a `data-part` attribute added to
them to select and style them in the DOM.

```css
[data-scope="steps"][data-part="root"] {
  /* styles for the root part */
}

[data-scope="steps"][data-part="root"][data-orientation="horizontal|vertical"] {
  /* styles for the root part based on orientation */
}

[data-scope="steps"][data-part="list"] {
  /* styles for the list part */
}

[data-scope="steps"][data-part="list"][data-orientation="horizontal|vertical"] {
  /* styles for the list part based on orientation */
}

[data-scope="steps"][data-part="separator"] {
  /* styles for the separator part */
}

[data-scope="steps"][data-part="separator"][data-orientation="horizontal|vertical"] {
  /* styles for the separator part based on orientation */
}
```

### Current step

To style the current step, you can use the `data-current` attribute.

```css
[data-scope="steps"][data-part="item"][data-current] {
  /* item styles for the current step */
}

[data-scope="steps"][data-part="separator"][data-current] {
  /* separator styles for the current step */
}
```

### Completed step

To style the completed step, you can use the `data-complete` attribute.

```css
[data-scope="steps"][data-part="item"][data-complete] {
  /* item styles for the completed step */
}

[data-scope="steps"][data-part="separator"][data-complete] {
  /* separator styles for the completed step */
}
```

### Incomplete step

To style the incomplete step, you can use the `data-incomplete` attribute.

```css
[data-scope="steps"][data-part="item"][data-incomplete] {
  /* item styles for the incomplete step */
}

[data-scope="steps"][data-part="separator"][data-incomplete] {
  /* separator styles for the incomplete step */
}
```

## Methods and Properties

### Machine Context

The steps machine exposes the following context properties:

**`ids`**
Type: `ElementIds`
Description: The custom ids for the stepper elements

**`step`**
Type: `number`
Description: The controlled value of the stepper

**`defaultStep`**
Type: `number`
Description: The initial value of the stepper when rendered.
Use when you don't need to control the value of the stepper.

**`onStepChange`**
Type: `(details: StepChangeDetails) => void`
Description: Callback to be called when the value changes

**`onStepComplete`**
Type: `VoidFunction`
Description: Callback to be called when a step is completed

**`linear`**
Type: `boolean`
Description: If `true`, the stepper requires the user to complete the steps in order

**`orientation`**
Type: `"horizontal" | "vertical"`
Description: The orientation of the stepper

**`count`**
Type: `number`
Description: The total number of steps

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The steps `api` exposes the following methods:

**`value`**
Type: `number`
Description: The value of the stepper.

**`percent`**
Type: `number`
Description: The percentage of the stepper.

**`count`**
Type: `number`
Description: The total number of steps.

**`hasNextStep`**
Type: `boolean`
Description: Whether the stepper has a next step.

**`hasPrevStep`**
Type: `boolean`
Description: Whether the stepper has a previous step.

**`isCompleted`**
Type: `boolean`
Description: Whether the stepper is completed.

**`setStep`**
Type: `(step: number) => void`
Description: Function to set the value of the stepper.

**`goToNextStep`**
Type: `VoidFunction`
Description: Function to go to the next step.

**`goToPrevStep`**
Type: `VoidFunction`
Description: Function to go to the previous step.

**`resetStep`**
Type: `VoidFunction`
Description: Function to go to reset the stepper.

**`getItemState`**
Type: `(props: ItemProps) => ItemState`
Description: Returns the state of the item at the given index.

### Data Attributes

**`Root`**

**`data-scope`**: steps
**`data-part`**: root
**`data-orientation`**: The orientation of the steps

**`List`**

**`data-scope`**: steps
**`data-part`**: list
**`data-orientation`**: The orientation of the list

**`Item`**

**`data-scope`**: steps
**`data-part`**: item
**`data-orientation`**: The orientation of the item

**`Trigger`**

**`data-scope`**: steps
**`data-part`**: trigger
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the trigger
**`data-complete`**: Present when the trigger value is complete
**`data-current`**: Present when current
**`data-incomplete`**: 

**`Content`**

**`data-scope`**: steps
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the content

**`Indicator`**

**`data-scope`**: steps
**`data-part`**: indicator
**`data-complete`**: Present when the indicator value is complete
**`data-current`**: Present when current
**`data-incomplete`**: 

**`Separator`**

**`data-scope`**: steps
**`data-part`**: separator
**`data-orientation`**: The orientation of the separator
**`data-complete`**: Present when the separator value is complete
**`data-current`**: Present when current
**`data-incomplete`**: 

**`Progress`**

**`data-scope`**: steps
**`data-part`**: progress
**`data-complete`**: Present when the progress value is complete

### CSS Variables

<CssVarTable name="steps" />
A switch allows users to turn an individual option on or off.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/switch)
[Logic Visualizer](https://zag-visualizer.vercel.app/switch)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/switch)



**Features**

- Sync with `disabled` state of fieldset
- Sync with form `reset` events
- Can be toggled programmatically

## Installation

To use the switch machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/switch @zag-js/svelte