diff --git a/packages/react/src/components/accordion/accordion.stories.tsx b/packages/react/src/components/accordion/accordion.stories.tsx
index 40d41549a..bf90fcfe2 100644
--- a/packages/react/src/components/accordion/accordion.stories.tsx
+++ b/packages/react/src/components/accordion/accordion.stories.tsx
@@ -18,3 +18,7 @@ export { Provider } from './examples/provider'
export { RenderProp } from './examples/render-prop'
export { Vertical } from './examples/vertical'
export { WithSlider } from './examples/with-slider'
+export { ContextFocusedValue } from './examples/context/focusedValue'
+export { ContextValue } from './examples/context/value'
+export { ContextSetValue } from './examples/context/setValue'
+export { ContextGetItemState } from './examples/context/getItemState'
diff --git a/packages/react/src/components/accordion/examples/context/focusedValue.tsx b/packages/react/src/components/accordion/examples/context/focusedValue.tsx
new file mode 100644
index 000000000..6c7d59599
--- /dev/null
+++ b/packages/react/src/components/accordion/examples/context/focusedValue.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextFocusedValue = () => {
+ return (
+
+
+ {(context) => Focused item: {context.focusedValue}}
+
+ {['React', 'Solid', 'Vue'].map((item) => (
+
+
+ What is {item}?
+
+
+
+
+
+ {item} is a JavaScript library for building user interfaces.
+
+
+ ))}
+
+ )
+}
diff --git a/packages/react/src/components/accordion/examples/context/getItemState.tsx b/packages/react/src/components/accordion/examples/context/getItemState.tsx
new file mode 100644
index 000000000..057a7be3e
--- /dev/null
+++ b/packages/react/src/components/accordion/examples/context/getItemState.tsx
@@ -0,0 +1,36 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextGetItemState = () => {
+ const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
+ return (
+
+
+ {(context) => {
+ const itemState = context.getItemState(items[2])
+ return (
+ <>
+ Vue State:
+ Disabled: {itemState.disabled ? 'Y' : 'N'}
+ Expanded: {itemState.expanded ? 'Y' : 'N'}
+ Focused: {itemState.focused ? 'Y' : 'N'}
+ >
+ )
+ }}
+
+ {items.map((item) => (
+
+
+ What is {item.value}?
+
+
+
+
+
+ {item.value} is a JavaScript library for building user interfaces.
+
+
+ ))}
+
+ )
+}
diff --git a/packages/react/src/components/accordion/examples/context/setValue.tsx b/packages/react/src/components/accordion/examples/context/setValue.tsx
new file mode 100644
index 000000000..7fa45554b
--- /dev/null
+++ b/packages/react/src/components/accordion/examples/context/setValue.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextSetValue = () => {
+ return (
+
+
+ {(context) => }
+
+ {['React', 'Solid', 'Vue'].map((item) => (
+
+
+ What is {item}?
+
+
+
+
+
+ {item} is a JavaScript library for building user interfaces.
+
+
+ ))}
+
+ )
+}
diff --git a/packages/react/src/components/accordion/examples/context/value.tsx b/packages/react/src/components/accordion/examples/context/value.tsx
new file mode 100644
index 000000000..ed914df1b
--- /dev/null
+++ b/packages/react/src/components/accordion/examples/context/value.tsx
@@ -0,0 +1,25 @@
+import { Accordion } from '@ark-ui/react/accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+export const ContextValue = () => {
+ return (
+
+
+ {(context) => Selected items: {context.value.join(', ')}}
+
+ {['React', 'Solid', 'Vue'].map((item) => (
+
+
+ What is {item}?
+
+
+
+
+
+ {item} is a JavaScript library for building user interfaces.
+
+
+ ))}
+
+ )
+}
diff --git a/packages/solid/src/components/accordion/accordion.stories.tsx b/packages/solid/src/components/accordion/accordion.stories.tsx
index fbe2339e3..ec8b871c8 100644
--- a/packages/solid/src/components/accordion/accordion.stories.tsx
+++ b/packages/solid/src/components/accordion/accordion.stories.tsx
@@ -16,3 +16,7 @@ export { Multiple } from './examples/multiple'
export { Provider } from './examples/provider'
export { RenderProp } from './examples/render-prop'
export { Vertical } from './examples/vertical'
+export { ContextFocusedValue } from './examples/context/focusedValue'
+export { ContextValue } from './examples/context/value'
+export { ContextSetValue } from './examples/context/setValue'
+export { ContextGetItemState } from './examples/context/getItemState'
diff --git a/packages/solid/src/components/accordion/examples/context/focusedValue.tsx b/packages/solid/src/components/accordion/examples/context/focusedValue.tsx
new file mode 100644
index 000000000..17b213dac
--- /dev/null
+++ b/packages/solid/src/components/accordion/examples/context/focusedValue.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextFocusedValue = () => {
+ return (
+
+
+ {(context) => Focused item: {context().focusedValue}}
+
+
+ {(item) => (
+
+
+ What is {item()}?
+
+
+
+
+
+ {item()} is a JavaScript library for building user interfaces.
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/getItemState.tsx b/packages/solid/src/components/accordion/examples/context/getItemState.tsx
new file mode 100644
index 000000000..76a213fa5
--- /dev/null
+++ b/packages/solid/src/components/accordion/examples/context/getItemState.tsx
@@ -0,0 +1,39 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextGetItemState = () => {
+ const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
+ return (
+
+
+ {(context) => {
+ const itemState = context().getItemState(items[2])
+ return (
+ <>
+ Vue State:
+ Disabled: {itemState.disabled ? 'Y' : 'N'}
+ Expanded: {itemState.expanded ? 'Y' : 'N'}
+ Focused: {itemState.focused ? 'Y' : 'N'}
+ >
+ )
+ }}
+
+
+ {(item) => (
+
+
+ What is {item().value}?
+
+
+
+
+
+ {item().value} is a JavaScript library for building user interfaces.
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/setValue.tsx b/packages/solid/src/components/accordion/examples/context/setValue.tsx
new file mode 100644
index 000000000..e1c2120e0
--- /dev/null
+++ b/packages/solid/src/components/accordion/examples/context/setValue.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextSetValue = () => {
+ return (
+
+
+ {(context) => }
+
+
+ {(item) => (
+
+
+ What is {item()}?
+
+
+
+
+
+ {item()} is a JavaScript library for building user interfaces.
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/solid/src/components/accordion/examples/context/value.tsx b/packages/solid/src/components/accordion/examples/context/value.tsx
new file mode 100644
index 000000000..ac6c9897d
--- /dev/null
+++ b/packages/solid/src/components/accordion/examples/context/value.tsx
@@ -0,0 +1,28 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ChevronDownIcon } from 'lucide-solid'
+import { Index } from 'solid-js'
+
+export const ContextValue = () => {
+ return (
+
+
+ {(context) => Selected items: {context().value.join(', ')}}
+
+
+ {(item) => (
+
+
+ What is {item()}?
+
+
+
+
+
+ {item()} is a JavaScript library for building user interfaces.
+
+
+ )}
+
+
+ )
+}
diff --git a/packages/vue/src/components/accordion/accordion.stories.vue b/packages/vue/src/components/accordion/accordion.stories.vue
index aa90097a7..a9cc0cd07 100644
--- a/packages/vue/src/components/accordion/accordion.stories.vue
+++ b/packages/vue/src/components/accordion/accordion.stories.vue
@@ -2,6 +2,10 @@
import Accordion from './examples/accordion.vue'
import Basic from './examples/basic.vue'
import Collapsible from './examples/collapsible.vue'
+import ContextFocusedValue from './examples/context/focusedValue.vue'
+import ContextGetItemState from './examples/context/getItemState.vue'
+import ContextSetValue from './examples/context/setValue.vue'
+import ContextValue from './examples/context/value.vue'
import Controlled from './examples/controlled.vue'
import Disabled from './examples/disabled.vue'
import Horizontal from './examples/horizontal.vue'
@@ -42,5 +46,17 @@ import Vertical from './examples/vertical.vue'
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue/src/components/accordion/examples/context/focusedValue.vue b/packages/vue/src/components/accordion/examples/context/focusedValue.vue
new file mode 100644
index 000000000..3883522ac
--- /dev/null
+++ b/packages/vue/src/components/accordion/examples/context/focusedValue.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Focused item: {{ context.focusedValue }}
+
+
+
+ What is {{ item }}?
+
+
+
+
+
+ {{ item }} is a JavaScript library for building user interfaces.
+
+
+
+
diff --git a/packages/vue/src/components/accordion/examples/context/getItemState.vue b/packages/vue/src/components/accordion/examples/context/getItemState.vue
new file mode 100644
index 000000000..b7629c86a
--- /dev/null
+++ b/packages/vue/src/components/accordion/examples/context/getItemState.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Vue State:
+ Disabled: {{ context.getItemState(items[2]).disabled ? 'Y' : 'N' }}
+ Expanded: {{ context.getItemState(items[2]).expanded ? 'Y' : 'N' }}
+ Focused: {{ context.getItemState(items[2]).focused ? 'Y' : 'N' }}
+
+
+
+ What is {{ item }}?
+
+
+
+
+
+ {{ item }} is a JavaScript library for building user interfaces.
+
+
+
+
diff --git a/packages/vue/src/components/accordion/examples/context/setValue.vue b/packages/vue/src/components/accordion/examples/context/setValue.vue
new file mode 100644
index 000000000..687575ab5
--- /dev/null
+++ b/packages/vue/src/components/accordion/examples/context/setValue.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+ What is {{ item }}?
+
+
+
+
+
+ {{ item }} is a JavaScript library for building user interfaces.
+
+
+
+
diff --git a/packages/vue/src/components/accordion/examples/context/value.vue b/packages/vue/src/components/accordion/examples/context/value.vue
new file mode 100644
index 000000000..fe5f8ed4f
--- /dev/null
+++ b/packages/vue/src/components/accordion/examples/context/value.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Selected items: {{ context.value.join(', ') }}
+
+
+
+ What is {{ item }}?
+
+
+
+
+
+ {{ item }} is a JavaScript library for building user interfaces.
+
+
+
+
diff --git a/website/src/content/pages/components/accordion.mdx b/website/src/content/pages/components/accordion.mdx
index 5d0a1c155..8b401b749 100644
--- a/website/src/content/pages/components/accordion.mdx
+++ b/website/src/content/pages/components/accordion.mdx
@@ -76,11 +76,11 @@ Use the `--height` and/or `--width` CSS variables to animate the size of the con
}
}
-[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+[data-scope='accordion'][data-part='item-content'][data-state='open'] {
animation: slideDown 250ms ease-in-out;
}
-[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
animation: slideUp 200ms ease-in-out;
}
```
@@ -94,6 +94,30 @@ You can leverage it to access the component state and methods from outside the a
> If you're using the `RootProvider` component, you don't need to use the `Root` component.
+### Acessing the focused item
+
+Use the `focusedValue` property to get the value of the focused accordion item.
+
+
+
+### Acessing the selected items
+
+Use the `value` property to get the selected accordion items.
+
+
+
+### Setting the selected items
+
+Use the `setValue` method to set the selected accordion items.
+
+
+
+### Accessing an item's state
+
+Use the `getItemState` method to get the state of an accordion item.
+
+
+
## API Reference
@@ -104,4 +128,4 @@ This component complies with the [Accordion WAI-ARIA design pattern](https://www
### Keyboard Support
-
\ No newline at end of file
+