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

## Anatomy

To set up the accordion 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 accordion package into your project

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

The accordion package exports two key functions:

- `machine` â The state machine logic for the accordion 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
accordion machine in your project ð¥

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

  const data = [
    { title: "Watercraft", content: "Sample accordion content" },
    { title: "Automobiles", content: "Sample accordion content" },
    { title: "Aircraft", content: "Sample accordion content" },
  ]

  const id = $props.id()
  const service = useMachine(accordion.machine, ({ id }))
  const api = $derived(accordion.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  {#each data as item}
    <div {...api.getItemProps({ value: item.title })}>
      <h3>
        <button {...api.getItemTriggerProps({ value: item.title })}>
          {item.title}
        </button>
      </h3>
      <div {...api.getItemContentProps({ value: item.title })}>
        {item.content}
      </div>
    </div>
  {/each}
</div>
```

You may have noticed we wrapped each accordion trigger within an `h3`. This is
recommended by the
[WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties)
design pattern to ensure the accordion has the appropriate hierarchy on the
page.

### Opening multiple accordions at once

To allow multiple items to be expanded at once, set `multiple` to `true`. This
mode implicitly sets `collapsible` to `true` and ensures that each accordion can
be expanded.

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

### Opening accordions by default

To set the value of the accordion(s) that should be opened initially, pass the
`defaultValue` property to the machine function.

```jsx {3,4,9}
// for multiple accordions
const service = useMachine(accordion.machine, {
  multiple: true,
  defaultValue: ["home"],
})

// for single accordions
const service = useMachine(accordion.machine, {
  defaultValue: ["home"],
})
```

### Controlled accordions

To control the accordion's value, pass the `value` and `onValueChange`
properties to the machine function.

```svelte
<script lang="ts">
  let value = $state(["home"])

  const service = useMachine(accordion.machine, {
    get value() {
      return value
    },
    onValueChange(details) {
      value = details.value
    },
  })
</script>
```

### Toggle each accordion item

To collapse an already expanded accordion item by clicking on it, set the
context's `collapsible` property to `true`.

> Note: If `multiple` is `true`, we internally set `collapsible` to be `true`.

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

#### Listening for changes

When the accordion value changes, the `onValueChange` callback is invoked.

```jsx {2-5}
const service = useMachine(accordion.machine, {
  onValueChange(details) {
    // details => { value: string[] }
    console.log("selected accordion:", details.value)
  },
})
```

### Disabling an accordion item

To disable a specific accordion item, pass the `disabled: true` property to the
`getItemProps`, `getItemTriggerProps` and `getItemContentProps`.

When an accordion item is disabled, it is skipped from keyboard navigation and
can't be interacted with.

```jsx
//...
<div {...api.getItemProps({ value: "item", disabled: true })}>
  <h3>
    <button {...api.getItemTriggerProps({ value: "item", disabled: true })}>
      Trigger
    </button>
  </h3>
  <div {...api.getItemContentProps({ value: "item", disabled: true })}>
    Content
  </div>
</div>
//...
```

You can also disable the entire accordion items by passing `disabled` to the
machine's context.

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

## Styling guide

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

### Open and closed state

When an accordion item is expanded or collapsed, a `data-state` attribute is set
on the item, trigger and content elements. This attribute is removed when it is
closed.

```css
[data-part="item"][data-state="open|closed"] {
  /* styles for the item is open or closed state */
}

[data-part="item-trigger"][data-state="open|closed"] {
  /* styles for the item is open or closed state */
}

[data-part="item-content"][data-state="open|closed"] {
  /* styles for the item is open or closed state */
}
```

### Focused state

When an accordion item's trigger is focused, a `data-focus` attribute is set on
the item and content.

```css
[data-part="item"][data-focus] {
  /* styles for the item's focus state */
}

[data-part="item-trigger"]:focus {
  /* styles for the trigger's focus state */
}

[data-part="item-content"][data-focus] {
  /* styles for the content's focus state */
}
```

## Creating Component

Create your accordion component by abstracting the machine into your own
component.

### Usage



### Implementation

Use the the `splitProps` utility to separate the machine's props from the
component's props.



## Methods and Properties

The accordion's `api` exposes the following methods and properties:

### Machine Context

The accordion machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }>`
Description: The ids of the elements in the accordion. Useful for composition.

**`multiple`**
Type: `boolean`
Description: Whether multiple accordion items can be expanded at the same time.

**`collapsible`**
Type: `boolean`
Description: Whether an accordion item can be closed after it has been expanded.

**`value`**
Type: `string[]`
Description: The controlled value of the expanded accordion items.

**`defaultValue`**
Type: `string[]`
Description: The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion.

**`disabled`**
Type: `boolean`
Description: Whether the accordion items are disabled

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: The callback fired when the state of expanded/collapsed accordion items changes.

**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Description: The callback fired when the focused accordion item changes.

**`orientation`**
Type: `"horizontal" | "vertical"`
Description: The orientation of the accordion items.

**`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 accordion `api` exposes the following methods:

**`focusedValue`**
Type: `string`
Description: The value of the focused accordion item.

**`value`**
Type: `string[]`
Description: The value of the accordion

**`setValue`**
Type: `(value: string[]) => void`
Description: Sets the value of the accordion

**`getItemState`**
Type: `(props: ItemProps) => ItemState`
Description: Returns the state of an accordion item.

### Data Attributes

**`Root`**

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

**`Item`**

**`data-scope`**: accordion
**`data-part`**: item
**`data-state`**: "open" | "closed"
**`data-focus`**: Present when focused
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the item

**`ItemContent`**

**`data-scope`**: accordion
**`data-part`**: item-content
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused
**`data-orientation`**: The orientation of the item

**`ItemIndicator`**

**`data-scope`**: accordion
**`data-part`**: item-indicator
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused
**`data-orientation`**: The orientation of the item

**`ItemTrigger`**

**`data-scope`**: accordion
**`data-part`**: item-trigger
**`data-orientation`**: The orientation of the item
**`data-state`**: "open" | "closed"

## Accessibility

### Keyboard Interactions

**`Space`**
Description: When focus is on an trigger of a collapsed item, the item is expanded

**`Enter`**
Description: When focus is on an trigger of a collapsed section, expands the section.

**`Tab`**
Description: Moves focus to the next focusable element

**`Shift + Tab`**
Description: Moves focus to the previous focusable element

**`ArrowDown`**
Description: Moves focus to the next trigger

**`ArrowUp`**
Description: Moves focus to the previous trigger.

**`Home`**
Description: When focus is on an trigger, moves focus to the first trigger.

**`End`**
Description: When focus is on an trigger, moves focus to the last trigger.
An angle slider is a circular dial that allows users to select an angle,
typically in degrees, within a 360Â° range. It provides an intuitive way to
control rotations or orientations, offering accessibility features.

## Resources


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



**Features**

- Fully managed keyboard navigation
- Supports touch or click on track to update value
- Supports Right-to-Left directionality

## Installation

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

```bash
npm install @zag-js/angle-slider @zag-js/svelte