Ark UI

Usage

Let’s start with a basic Accordion component:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Basic = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Basic = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'

const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])
</script>

<template>
  <Accordion.Root>
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.Trigger>{{ item }} trigger</Accordion.Trigger>
      <Accordion.Content>{{ item }} content</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</template>

Setting an Initial Panel

To set an initial panel to be open upon rendering, use the defaultValue prop:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Initial = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root defaultValue={['panel-2']}>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Initial = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root value={['panel-1']}>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

Story not available

Using Render Props

For more control over the Accordion’s functionality, you can use a function as a child, which provides access to the Accordion API:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const RenderProp = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          {(api) => (
            <>
              <Accordion.Trigger>{api.isOpen ? 'Close' : 'Open'}</Accordion.Trigger>
              <Accordion.Content>{item} content</Accordion.Content>
            </>
          )}
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const RenderProp = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            {(api) => (
              <>
                <Accordion.Trigger>{api().isOpen ? 'Close' : 'Open'}</Accordion.Trigger>
                <Accordion.Content>{item} content</Accordion.Content>
              </>
            )}
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

Story not available

Making the Accordion Collapsible

For a collapsible Accordion where all panels can be closed simultaneously, use the collapsible prop:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Collapsible = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root collapsible>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Collapsible = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root collapsible>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'

const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])
</script>

<template>
  <Accordion.Root collapsible>
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.Trigger>{{ item }} trigger</Accordion.Trigger>
      <Accordion.Content>{{ item }} content</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</template>

Opening Multiple Panels

For an Accordion that allows multiple panels to be open at once, use the multiple prop:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Multiple = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root multiple>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Multiple = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root multiple>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'

const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])
</script>

<template>
  <Accordion.Root multiple>
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.Trigger>{{ item }} trigger</Accordion.Trigger>
      <Accordion.Content>{{ item }} content</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</template>

Controlled Accordion

To create a controlled Accordion component, manage the state of the currently opened panels using the value prop and update it when the onChange event handler is called:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Controlled = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  const [value, setValue] = useState<string[]>([])
  return (
    <Accordion.Root value={value} onValueChange={(details) => setValue(details.value)}>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Controlled = () => {
  const [value, setValue] = createSignal<string[]>([])
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root value={value()} onValueChange={(details) => setValue(details.value)}>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'

const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])
</script>

<template>
  <Accordion.Root v-model="value">
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.Trigger>{{ item }} trigger</Accordion.Trigger>
      <Accordion.Content>{{ item }} content</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</template>

Changing the Orientation

To display the Accordion in a vertical orientation, use the orientation prop:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Vertical = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root orientation="vertical">
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item} disabled={item === 'panel-2'}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Vertical = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root orientation="vertical">
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item} disabled={item === 'panel-2'}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

Story not available

Disabling an Accordion Item

To disable an AccordionItem, use the disabled prop:

import { useState } from 'react'
import { Accordion } from '@ark-ui/react'

const Disabled = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root multiple>
      {items.map((item, id) => (
        <Accordion.Item key={id} value={item} disabled={item === 'panel-2'}>
          <Accordion.Trigger>{item} trigger</Accordion.Trigger>
          <Accordion.Content>{item} content</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

import { For, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'

const Disabled = () => {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Accordion.Root>
      <For each={items}>
        {(item) => (
          <Accordion.Item value={item} disabled={item === 'panel-2'}>
            <Accordion.Trigger>{item} trigger</Accordion.Trigger>
            <Accordion.Content>{item} content</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion.Root>
  )
}

Story not available