# Accordion

## Example

```svelte
<script lang="ts">
	import { Accordion, AccordionItem } from '@foxui/all';
</script>

<Accordion type="single">
	<AccordionItem title="Is it accessible?">
		Yes. It adheres to the WAI-ARIA design pattern.
	</AccordionItem>
	<AccordionItem title="Are you sure?">
		I mean, I hope so? It's based on the <a
			href="https://bits-ui.com/docs/components/accordion"
			target="_blank">bits-ui accordion component</a
		>, so if not it's not my fault 😅
	</AccordionItem>
</Accordion>
```

## Documentation

## Usage

```svelte
<Accordion type="single">
	<AccordionItem title="Is it accessible?">
		Yes. It adheres to the WAI-ARIA design pattern.
	</AccordionItem>
	<AccordionItem title="Are you sure?">
		I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
	</AccordionItem>
</Accordion>
```

## Sources

This component uses the bits-ui component: Accordion, see here for the documentation for that: https://bits-ui.com/docs/components/accordion/llms.txt

## API Reference

### Accordion
A vertically stacked set of interactive headings that each reveal a section of content.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | `Snippet` | `-` | The children content to render. Should be a list of AccordionItem components. (required) |
| type | `'single' | 'multiple'` | `-` | If set to 'multiple', the accordion will allow multiple items to be open at the same time. If set to single, the accordion will only allow a single item to be open. (required) |
| value | `string | string[]` | `-` | The value of the accordion item that is currently open. If type is set to "multiple", this will be an array of strings. If type is set to "single", this will be a string. (bindable) |
| onValueChange | `(value: string) => void | (value: string[]) => void` | `-` | A function that is called when the value of the accordion item changes. |
| disabled | `boolean` | `false` | Whether the accordion is disabled. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element being rendered. You can bind to this to get a reference to the element. (bindable) |

### AccordionItem
A single collapsible section within the accordion.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | `string` | `-` | The title of the accordion item, displayed both when the item is closed or open. (required) |
| children | `Snippet` | `-` | The children content to render. The content is displayed when the item is open. (required) |
| value | `string` | `-` | The value of the accordion item. This is used to identify when the item is open or closed. If not provided, a unique ID will be generated for this value. |
| disabled | `boolean` | `false` | Whether the accordion item is disabled. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element being rendered. You can bind to this to get a reference to the element. (bindable) |