Collapse

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

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['Vue']">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        {{ item }} trigger
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} Content</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

export function Basic(props: Collapse.RootProps) {
  const items = [{ value: 'React' }, { value: 'Solid' }, { value: 'Svelte', disabled: true }, { value: 'Vue' }]
  return (
    <Collapse.Root {...props}>
      {items.map((item, id) => (
        <Collapse.Item key={id} value={item.value} disabled={item.disabled}>
          <Collapse.ItemTrigger>
            {item.value}
            {' '}
            Trigger
            <Collapse.ItemIndicator>
              ⬇️
            </Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item.value}
            {' '}
            Content
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Index each={['React', 'Solid', 'Vue']}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>
              What is {item()}?
              <Collapse.ItemIndicator>
                <ChevronDownIcon />
              </Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">
  import type { CollapseRootProps } from '@destyler-ui/svelte'
  import { Collapse } from '@destyler-ui/svelte'
  const props: CollapseRootProps = $props()
  const items = [
    { value: 'React' },
    { value: 'Solid' },
    { value: 'Svelte', disabled: true },
    { value: 'Vue' },
  ]
</script>
<Collapse.Root {...props}>
  {#each items as item (item.value)}
    <Collapse.Item value={item.value} disabled={item.disabled}>
      <Collapse.ItemTrigger>{item.value} Trigger <Collapse.ItemIndicator>⬇️</Collapse.ItemIndicator></Collapse.ItemTrigger>
      <Collapse.ItemContent>{item.value} Content</Collapse.ItemContent>
    </Collapse.Item>
  {/each}
</Collapse.Root>

Anatomy

<script setup lang="ts">
import { Collapse } from '@destyler-ui/vue'
</script>

<template>
  <Collapse.Root>
    <Collapse.Item>
      <Collapse.ItemTrigger>
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent />
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Collapse.Root>
      <Collapse.Item>
        <Collapse.ItemTrigger>
          <Collapse.ItemIndicator />
        </Collapse.ItemTrigger>
        <Collapse.ItemContent />
      </Collapse.Item>
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Collapse.Root>
      <Collapse.Item value="details">
        <Collapse.ItemTrigger>
          <Collapse.ItemIndicator />
        </Collapse.ItemTrigger>
        <Collapse.ItemContent />
      </Collapse.Item>
    </Collapse.Root>
  )
}

<script lang="ts">
  import { Collapse } from '@destyler-ui/svelte'

  const items = [
    { value: 'React' },
    { value: 'Svelte' },
    { value: 'Vue' },
  ]
</script>

<Collapse.Root>
  {#each items as item (item.value)}
    <Collapse.Item value={item.value}>
      <Collapse.ItemTrigger>
        {item.value}
        <Collapse.ItemIndicator>⌄</Collapse.ItemIndicator>
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>{item.value} content</Collapse.ItemContent>
    </Collapse.Item>
  {/each}
</Collapse.Root>

Examples

Basic

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['Vue']">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        {{ item }} trigger
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} Content</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

export function Basic(props: Collapse.RootProps) {
  const items = [{ value: 'React' }, { value: 'Solid' }, { value: 'Svelte', disabled: true }, { value: 'Vue' }]
  return (
    <Collapse.Root {...props}>
      {items.map((item, id) => (
        <Collapse.Item key={id} value={item.value} disabled={item.disabled}>
          <Collapse.ItemTrigger>
            {item.value}
            {' '}
            Trigger
            <Collapse.ItemIndicator>
              ⬇️
            </Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item.value}
            {' '}
            Content
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Index each={['React', 'Solid', 'Vue']}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>
              What is {item()}?
              <Collapse.ItemIndicator>
                <ChevronDownIcon />
              </Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">
  import type { CollapseRootProps } from '@destyler-ui/svelte'
  import { Collapse } from '@destyler-ui/svelte'
  const props: CollapseRootProps = $props()
  const items = [
    { value: 'React' },
    { value: 'Solid' },
    { value: 'Svelte', disabled: true },
    { value: 'Vue' },
  ]
</script>
<Collapse.Root {...props}>
  {#each items as item (item.value)}
    <Collapse.Item value={item.value} disabled={item.disabled}>
      <Collapse.ItemTrigger>{item.value} Trigger <Collapse.ItemIndicator>⬇️</Collapse.ItemIndicator></Collapse.ItemTrigger>
      <Collapse.ItemContent>{item.value} Content</Collapse.ItemContent>
    </Collapse.Item>
  {/each}
</Collapse.Root>

Collapsible

Allow all items to be collapsed simultaneously.

Show Code

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

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

<template>
  <Collapse.Root collapsible>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        {{ item }} Trigger
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Collapsible(props: Collapse.RootProps) {
  return (
    <Collapse.Root collapsible {...props}>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            {item}
            {' '}
            Trigger
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function Collapsible() {
  return (
    <Collapse.Root value={['React']} collapsible>
      <Index each={['React', 'Solid', 'Vue']}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>
              What is {item()}?
              <Collapse.ItemIndicator>
                <ChevronDownIcon />
              </Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root collapsible>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>{item} Trigger <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Controlled

Control the expanded items programmatically.

Show Code

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

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

<template>
  {{ value }}
  <Collapse.Root v-model="value">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>{{ item }} trigger</Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} content</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { useState } from 'react'
import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Controlled() {
  const [value, setValue] = useState(['Vue'])

  return (
    <>
      <div>{value.join(', ')}</div>
      <Collapse.Root value={value} onValueChange={details => setValue(details.value)}>
        {items.map(item => (
          <Collapse.Item key={item} value={item}>
            <Collapse.ItemTrigger>
              {item}
              {' '}
              trigger
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item}
              {' '}
              content
            </Collapse.ItemContent>
          </Collapse.Item>
        ))}
      </Collapse.Root>
    </>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { createSignal, Index } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal<string[]>([])
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Collapse.Root value={value()} onValueChange={details => setValue(details.value)}>
      <Index each={items}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>{item()} trigger</Collapse.ItemTrigger>
            <Collapse.ItemContent>{item()} content</Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">
  import { Collapse } from '@destyler-ui/svelte'
  const items = ['React', 'Solid', 'Vue']
  let value = $state(['Vue'])
</script>
<div>{value.join(', ')}</div>
<Collapse.Root bind:value>
  {#each items as item (item)}
    <Collapse.Item value={item}>
      <Collapse.ItemTrigger>{item} trigger</Collapse.ItemTrigger>
      <Collapse.ItemContent>{item} content</Collapse.ItemContent>
    </Collapse.Item>
  {/each}
</Collapse.Root>

Multiple

Allow multiple items to be expanded at the same time.

Show Code

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

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

<template>
  <Collapse.Root multiple>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        {{ item }} Trigger
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Multiple(props: Collapse.RootProps) {
  return (
    <Collapse.Root multiple {...props}>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            {item}
            {' '}
            Trigger
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function Multiple() {
  return (
    <Collapse.Root value={['React']} multiple>
      <Index each={['React', 'Solid', 'Vue']}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>
              What is {item()}?
              <Collapse.ItemIndicator>
                <ChevronDownIcon />
              </Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root multiple>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>{item} Trigger <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Disabled

Disable specific collapse items.

Show Code

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

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

<template>
  <Collapse.Root>
    <Collapse.Item v-for="item in items" :key="item" :value="item" :disabled="item === 'React'">
      <Collapse.ItemTrigger>{{ item }} Trigger</Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} Content</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Disabled() {
  return (
    <Collapse.Root>
      {items.map(item => (
        <Collapse.Item key={item} value={item} disabled={item === 'React'}>
          <Collapse.ItemTrigger>
            {item}
            {' '}
            Trigger
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            Content
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { Index } from 'solid-js'

export function Disabled() {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Collapse.Root>
      <Index each={items}>
        {item => (
          <Collapse.Item value={item()} disabled={item() === 'panel-2'}>
            <Collapse.ItemTrigger>{item()} trigger</Collapse.ItemTrigger>
            <Collapse.ItemContent>{item()} content</Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root>{#each items as item (item)}<Collapse.Item value={item} disabled={item === 'React'}><Collapse.ItemTrigger>{item} Trigger</Collapse.ItemTrigger><Collapse.ItemContent><div>{item} Content</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Horizontal

Display the collapse in a horizontal layout.

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['React']" orientation="horizontal">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Horizontal(props: Collapse.RootProps) {
  return (
    <Collapse.Root defaultValue={['React']} orientation="horizontal" {...props}>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            What is
            {' '}
            {item}
            ?
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function Horizontal() {
  return (
    <Collapse.Root defaultValue={['React']} orientation="horizontal">
      <Index each={['React', 'Solid', 'Vue']}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>
              What is {item()}?
              <Collapse.ItemIndicator>
                <ChevronDownIcon />
              </Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item()} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root defaultValue={['React']} orientation="horizontal">{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>What is {item}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Vertical

Display the collapse in a vertical layout.

Show Code

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

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

<template>
  <Collapse.Root orientation="vertical">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>{{ item }} trigger</Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} content</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function Vertical(props: Collapse.RootProps) {
  return (
    <Collapse.Root orientation="vertical" {...props}>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            {item}
            {' '}
            trigger
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            content
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { Index } from 'solid-js'

export function Vertical() {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Collapse.Root orientation="vertical">
      <Index each={items}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemTrigger>{item()} trigger</Collapse.ItemTrigger>
            <Collapse.ItemContent>{item()} content</Collapse.ItemContent>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root orientation="vertical">{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>{item} trigger</Collapse.ItemTrigger><Collapse.ItemContent><div>{item} content</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Context Value

Access the collapse context value.

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['React']">
    <Collapse.Context v-slot="context">
      <span>Selected items: {{ context.value.join(', ') }}</span>
    </Collapse.Context>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function ContextValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => (
          <span>
            Selected items:
            {context.value.join(', ')}
          </span>
        )}
      </Collapse.Context>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            What is
            {' '}
            {item}
            ?
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { For } from 'solid-js'
import { Collapse } from '@destyler-ui/solid'

const items = ['React', 'Solid', 'Vue']

export function ContextValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => <span>Selected items: {context().value.join(', ')}</span>}
      </Collapse.Context>
      <For each={items}>
        {item => (
          <Collapse.Item value={item}>
            <Collapse.ItemTrigger>
              What is {item}?
              <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </For>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root defaultValue={['React']}><Collapse.Context>{#snippet render(context)}<span>Selected items: {context().value.join(', ')}</span>{/snippet}</Collapse.Context>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>What is {item}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Context Focused Value

Access the focused value from the collapse context.

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['React']">
    <Collapse.Context v-slot="context">
      <span>Focused item: {{ context.focusedValue }}</span>
    </Collapse.Context>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function ContextFocusedValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => (
          <span>
            Focused item:
            {context.focusedValue}
          </span>
        )}
      </Collapse.Context>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            What is
            {' '}
            {item}
            ?
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { For } from 'solid-js'
import { Collapse } from '@destyler-ui/solid'

const items = ['React', 'Solid', 'Vue']

export function ContextFocusedValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => <span>Focused item: {context().focusedValue}</span>}
      </Collapse.Context>
      <For each={items}>
        {item => (
          <Collapse.Item value={item}>
            <Collapse.ItemTrigger>
              What is {item}?
              <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </For>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root defaultValue={['React']}><Collapse.Context>{#snippet render(context)}<span>Focused item: {context().focusedValue}</span>{/snippet}</Collapse.Context>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>What is {item}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Context Get Item State

Get the state of a specific item through context.

Show Code

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

const items = ref([{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }])
</script>

<template>
  <Collapse.Root :defaultValue="['React']">
    <Collapse.Context v-slot="context">
      <b>Vue State:</b>
      <span>Disabled: {{ context.getItemState(items[2]).disabled ? 'Y' : 'N' }}</span>
      <span>Expanded: {{ context.getItemState(items[2]).expanded ? 'Y' : 'N' }}</span>
      <span>Focused: {{ context.getItemState(items[2]).focused ? 'Y' : 'N' }}</span>
    </Collapse.Context>
    <Collapse.Item v-for="item in items" :key="item.value" v-bind="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]

export function ContextGetItemState() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => (
          <>
            <b>Vue State:</b>
            <span>
              Disabled:
              {' '}
              {context.getItemState(items[2]).disabled ? 'Y' : 'N'}
            </span>
            <span>
              Expanded:
              {' '}
              {context.getItemState(items[2]).expanded ? 'Y' : 'N'}
            </span>
            <span>
              Focused:
              {' '}
              {context.getItemState(items[2]).focused ? 'Y' : 'N'}
            </span>
          </>
        )}
      </Collapse.Context>
      {items.map(item => (
        <Collapse.Item key={item.value} value={item.value} disabled={item.disabled}>
          <Collapse.ItemTrigger>
            What is
            {' '}
            {item.value}
            ?
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item.value}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { For } from 'solid-js'
import { Collapse } from '@destyler-ui/solid'

const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]

export function ContextGetItemState() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => (
          <>
            <b>Vue State:</b>
            <span>
              Disabled: {context().getItemState(items[2]).disabled ? 'Y' : 'N'}
            </span>
            <span>
              Expanded: {context().getItemState(items[2]).expanded ? 'Y' : 'N'}
            </span>
            <span>
              Focused: {context().getItemState(items[2]).focused ? 'Y' : 'N'}
            </span>
          </>
        )}
      </Collapse.Context>
      <For each={items}>
        {item => (
          <Collapse.Item value={item.value} disabled={item.disabled}>
            <Collapse.ItemTrigger>
              What is {item.value}?
              <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item.value} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </For>
    </Collapse.Root>
  )
}

<script lang="ts">
  import { Collapse } from '@destyler-ui/svelte'
  const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
</script>
<Collapse.Root defaultValue={['React']}>
  <Collapse.Context>{#snippet render(context)}
    <b>Vue State:</b><span>Disabled: {context().getItemState(items[2]).disabled ? 'Y' : 'N'}</span><span>Expanded: {context().getItemState(items[2]).expanded ? 'Y' : 'N'}</span><span>Focused: {context().getItemState(items[2]).focused ? 'Y' : 'N'}</span>
  {/snippet}</Collapse.Context>
  {#each items as item (item.value)}<Collapse.Item {...item}><Collapse.ItemTrigger>What is {item.value}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item.value} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}
</Collapse.Root>

Context Set Value

Set the collapse value through context.

Show Code

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

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

<template>
  <Collapse.Root :defaultValue="['React']">
    <Collapse.Context v-slot="context">
      <button @click="context.setValue(['Vue'])">Select Vue</button>
    </Collapse.Context>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function ContextSetValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => (
          <button onClick={() => context.setValue(['Vue'])}>Select Vue</button>
        )}
      </Collapse.Context>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemTrigger>
            What is
            {' '}
            {item}
            ?
            <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
          </Collapse.ItemTrigger>
          <Collapse.ItemContent>
            {item}
            {' '}
            is a JavaScript library for building user interfaces.
          </Collapse.ItemContent>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { For } from 'solid-js'
import { Collapse } from '@destyler-ui/solid'

const items = ['React', 'Solid', 'Vue']

export function ContextSetValue() {
  return (
    <Collapse.Root defaultValue={['React']}>
      <Collapse.Context>
        {context => <button onClick={() => context().setValue(['Vue'])}>Select Vue</button>}
      </Collapse.Context>
      <For each={items}>
        {item => (
          <Collapse.Item value={item}>
            <Collapse.ItemTrigger>
              What is {item}?
              <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item} is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        )}
      </For>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root defaultValue={['React']}><Collapse.Context>{#snippet render(context)}<button onclick={() => context().setValue(['Vue'])}>Select Vue</button>{/snippet}</Collapse.Context>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>What is {item}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.Root>

Render Prop

Use render prop for custom item rendering.

Show Code

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

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

<template>
  <Collapse.Root>
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemContext v-slot="{ expanded }">
        <Collapse.ItemTrigger>{{ expanded ? 'Expanded' : 'Closed' }}</Collapse.ItemTrigger>
        <Collapse.ItemContent>
          <div>{{ item }} content</div>
        </Collapse.ItemContent>
      </Collapse.ItemContext>
    </Collapse.Item>
  </Collapse.Root>
</template>

import { Collapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function RenderProp() {
  return (
    <Collapse.Root>
      {items.map(item => (
        <Collapse.Item key={item} value={item}>
          <Collapse.ItemContext>
            {({ expanded }) => (
              <>
                <Collapse.ItemTrigger>{expanded ? 'Expanded' : 'Closed'}</Collapse.ItemTrigger>
                <Collapse.ItemContent>
                  {item}
                  {' '}
                  content
                </Collapse.ItemContent>
              </>
            )}
          </Collapse.ItemContext>
        </Collapse.Item>
      ))}
    </Collapse.Root>
  )
}

import { Collapse } from '@destyler-ui/solid/collapse'
import { Index } from 'solid-js'

export function RenderProp() {
  const items = ['panel-1', 'panel-2', 'panel-3']
  return (
    <Collapse.Root>
      <Index each={items}>
        {item => (
          <Collapse.Item value={item()}>
            <Collapse.ItemContext>
              {api => (
                <>
                  <Collapse.ItemTrigger>
                    {api().expanded ? 'Expanded' : 'Closed'}
                  </Collapse.ItemTrigger>
                  <Collapse.ItemContent>{item()} content</Collapse.ItemContent>
                </>
              )}
            </Collapse.ItemContext>
          </Collapse.Item>
        )}
      </Index>
    </Collapse.Root>
  )
}

<script lang="ts">import { Collapse } from '@destyler-ui/svelte'; const items = ['React', 'Solid', 'Vue']</script>
<Collapse.Root>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemContext>{#snippet render(state)}<Collapse.ItemTrigger>{state().expanded ? 'Expanded' : 'Closed'}</Collapse.ItemTrigger><Collapse.ItemContent><div>{item} content</div></Collapse.ItemContent>{/snippet}</Collapse.ItemContext></Collapse.Item>{/each}</Collapse.Root>

Root Provider

Show Code

<script setup lang="ts">
import { Collapse, useCollapse } from '@destyler-ui/vue'
import { ref } from 'vue'

const items = ref(['React', 'Solid', 'Vue'])

const collapse = useCollapse({ defaultValue: ['React'] })
</script>

<template>
  <button @click="collapse.setValue(['Vue'])">Set to Vue</button>

  <Collapse.RootProvider :value="collapse">
    <Collapse.Item v-for="item in items" :key="item" :value="item">
      <Collapse.ItemTrigger>
        What is {{ item }}?
        <Collapse.ItemIndicator />
      </Collapse.ItemTrigger>
      <Collapse.ItemContent>
        <div>{{ item }} is a JavaScript library for building user interfaces.</div>
      </Collapse.ItemContent>
    </Collapse.Item>
  </Collapse.RootProvider>
</template>

import { Collapse, useCollapse } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function RootProvider() {
  const collapse = useCollapse({ defaultValue: ['React'] })

  return (
    <>
      <button onClick={() => collapse.setValue(['Vue'])}>Set to Vue</button>

      <Collapse.RootProvider value={collapse}>
        {items.map(item => (
          <Collapse.Item key={item} value={item}>
            <Collapse.ItemTrigger>
              What is
              {' '}
              {item}
              ?
              <Collapse.ItemIndicator>x</Collapse.ItemIndicator>
            </Collapse.ItemTrigger>
            <Collapse.ItemContent>
              {item}
              {' '}
              is a JavaScript library for building user interfaces.
            </Collapse.ItemContent>
          </Collapse.Item>
        ))}
      </Collapse.RootProvider>
    </>
  )
}

import { Collapse, useCollapse } from '@destyler-ui/solid/collapse'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'

export function RootProvider() {
  const collapse = useCollapse({ defaultValue: ['React'] })

  return (
    <>
      <button onClick={() => collapse().setValue(['Vue'])}>Set to Vue</button>

      <Collapse.RootProvider value={collapse}>
        <Index each={['React', 'Solid', 'Vue']}>
          {item => (
            <Collapse.Item value={item()}>
              <Collapse.ItemTrigger>
                What is {item()}?
                <Collapse.ItemIndicator>
                  <ChevronDownIcon />
                </Collapse.ItemIndicator>
              </Collapse.ItemTrigger>
              <Collapse.ItemContent>
                {item()} is a JavaScript library for building user interfaces.
              </Collapse.ItemContent>
            </Collapse.Item>
          )}
        </Index>
      </Collapse.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Collapse, useCollapse } from '@destyler-ui/svelte'
  const items = ['React', 'Solid', 'Vue']
  const id = $props.id()
  const collapse = useCollapse({ id, defaultValue: ['React'] })
</script>
<button onclick={() => collapse().setValue(['Vue'])}>Set to Vue</button><Collapse.RootProvider value={collapse}>{#each items as item (item)}<Collapse.Item value={item}><Collapse.ItemTrigger>What is {item}? <Collapse.ItemIndicator>x</Collapse.ItemIndicator></Collapse.ItemTrigger><Collapse.ItemContent><div>{item} is a JavaScript library for building user interfaces.</div></Collapse.ItemContent></Collapse.Item>{/each}</Collapse.RootProvider>

API Reference

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
collapsible	false	false | true Whether an collapse item can be closed after it has been expanded.
defaultValue	—	string[] The initial value of the collapse that are expanded. Use this when you do not need to control the state of the collapse.
disabled	—	false | true Whether the collapse items are disabled
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> The ids of the elements in the collapse. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
modelValue	—	string[] The collapse items that are currently expanded. Use this prop to control the state of the items via v-model.
multiple	false	false | true Whether multiple collapse items can be expanded at the same time.
orientation	"vertical"	"horizontal" | "vertical" The orientation of the collapse items.
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
focusChange	[details: FocusChangeDetails] The callback fired when the focused collapse item changes.
update:modelValue	[value: string[]] The callback fired when the model value changes.
valueChange	[details: ValueChangeDetails] The callback fired when the state of expanded/collapsed collapse items changes.

Context

No serializable props or emits are declared for this part.

Item

Prop	Default	Type
value*	—	string The value of the accordion item.
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true Whether the accordion item is disabled.

ItemContent

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

No serializable props or emits are declared for this part.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
collapsible	false	false | true Whether an accordion item can be closed after it has been expanded.
defaultValue	—	string[] The initial value of the collapse when it is first rendered. Use when you do not need to control the state of the collapse.
disabled	—	false | true Whether the accordion items are disabled
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> The ids of the elements in the accordion. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
multiple	false	false | true Whether multiple accordion items can be expanded at the same time.
onFocusChange	—	(details: collapse.FocusChangeDetails) => void The callback fired when the focused accordion item changes.
onValueChange	—	(details: collapse.ValueChangeDetails) => void The callback fired when the state of expanded/collapsed accordion items changes.
orientation	"vertical"	"horizontal" | "vertical" The orientation of the accordion items.
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The `value` of the accordion items that are currently being expanded.

Context

Prop	Default	Type
children*	—	(context: UseCollapseContext) => ReactNode

Item

Prop	Default	Type
value*	—	string The value of the accordion item.
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true Whether the accordion item is disabled.

ItemContent

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

Prop	Default	Type
children*	—	(context: UseCollapseItemContext) => ReactNode

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseCollapseReturn
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js411.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
collapsible	false	false | true Whether an accordion item can be closed after it has been expanded.
defaultValue	—	string[] The initial value of the collapse when it is first rendered. Use when you do not need to control the state of the color picker.
disabled	—	false | true Whether the accordion items are disabled
ids	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> The ids of the elements in the accordion. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
multiple	false	false | true Whether multiple accordion items can be expanded at the same time.
onFocusChange	—	(details: FocusChangeDetails) => void The callback fired when the focused accordion item changes.
onValueChange	—	(details: ValueChangeDetails) => void The callback fired when the state of expanded/collapsed accordion items changes.
orientation	"vertical"	"horizontal" | "vertical" The orientation of the accordion items.
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The `value` of the accordion items that are currently being expanded.

Context

Prop	Default	Type
children*	—	(context: UseCollapseContext) => Element

Item

Prop	Default	Type
value*	—	string The value of the accordion item.
asChild	—	(props: (userProps?: solid_js411.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true Whether the accordion item is disabled.

ItemContent

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js411.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemContext

Prop	Default	Type
children*	—	(context: UseCollapseItemContext) => Element

ItemIndicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js411.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js411.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseCollapseReturn
asChild	—	(props: (userProps?: solid_js411.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
collapsible	false	false | true Whether an accordion item can be closed after it has been expanded.
defaultValue	—	string[]
disabled	—	false | true Whether the accordion items are disabled
id	—	string
ids	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> The ids of the elements in the accordion. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
multiple	false	false | true Whether multiple accordion items can be expanded at the same time.
onFocusChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CollapseFocusChangeDetails) => void The callback fired when the focused accordion item changes.
onValueChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CollapseValueChangeDetails) => void The callback fired when the state of expanded/collapsed accordion items changes.
orientation	"vertical"	"horizontal" | "vertical" The orientation of the accordion items.
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The `value` of the accordion items that are currently being expanded.

Context

Prop	Default	Type
render*	—	Snippet<[UseCollapseContext]>

Item

Prop	Default	Type
value*	—	string The value of the accordion item.
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
disabled	—	false | true Whether the accordion item is disabled.

ItemContent

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemContext

Prop	Default	Type
render*	—	Snippet<[UseCollapseItemContext]>

ItemIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UseCollapseReturn
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.