Accordion

sections stacked in one column, each opening and closing on its own.

usage

scenario

example

code

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion>
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion>
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion>
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div class="CharcellAccordion">
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion variant="dense">
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion variant="dense">
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion variant="dense">
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div class="CharcellAccordion CharcellAccordion--dense">
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion spacious>
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion spacious>
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion spacious>
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div class="CharcellAccordion CharcellAccordion--spacious">
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion border="none">
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion border="none">
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion border="none">
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div
  class="CharcellAccordion CharcellAccordion--border-top-none CharcellAccordion--border-end-none CharcellAccordion--border-bottom-none CharcellAccordion--border-start-none"
>
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion border="rounded">
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion border="rounded">
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion border="rounded">
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div
  class="CharcellAccordion CharcellAccordion--border-top-rounded CharcellAccordion--border-end-rounded CharcellAccordion--border-bottom-rounded CharcellAccordion--border-start-rounded"
>
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion border="heavy">
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion border="heavy">
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion border="heavy">
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div
  class="CharcellAccordion CharcellAccordion--border-top-heavy CharcellAccordion--border-end-heavy CharcellAccordion--border-bottom-heavy CharcellAccordion--border-start-heavy"
>
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

import { Accordion, AccordionItem } from 'charcell/react';

export function AccordionExample() {
  return (
    <Accordion border="double">
      <AccordionItem title="the bait">
        first prize is the corley hardtail.
      </AccordionItem>
      <AccordionItem title="the collision">
        ben rams moe head-on and both cars explode.
      </AccordionItem>
      <AccordionItem title="the disguises">
        an unknown avenger and a doreen schmorley.
      </AccordionItem>
    </Accordion>
  );
}

<script setup lang="ts">
import { Accordion, AccordionItem } from 'charcell/vue';
</script>

<template>
  <Accordion border="double">
    <AccordionItem title="the bait">
      first prize is the corley hardtail.
    </AccordionItem>
    <AccordionItem title="the collision">
      ben rams moe head-on and both cars explode.
    </AccordionItem>
    <AccordionItem title="the disguises">
      an unknown avenger and a doreen schmorley.
    </AccordionItem>
  </Accordion>
</template>

<script lang="ts">
  import { Accordion, AccordionItem } from 'charcell/svelte';
</script>

<Accordion border="double">
  <AccordionItem title="the bait">
    first prize is the corley hardtail.
  </AccordionItem><AccordionItem title="the collision">
    ben rams moe head-on and both cars explode.
  </AccordionItem><AccordionItem title="the disguises">
    an unknown avenger and a doreen schmorley.
  </AccordionItem>
</Accordion>

<div
  class="CharcellAccordion CharcellAccordion--border-top-double CharcellAccordion--border-end-double CharcellAccordion--border-bottom-double CharcellAccordion--border-start-double"
>
  <details class="CharcellAccordionItem" open>
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the bait</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      first prize is the corley hardtail.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the collision</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      ben rams moe head-on and both cars explode.
    </div>
  </details>
  <details class="CharcellAccordionItem">
    <summary class="CharcellAccordionItem__summary">
      <span class="CharcellAccordionItem__title">the disguises</span>
    </summary>
    <div class="CharcellAccordionItem__content">
      an unknown avenger and a doreen schmorley.
    </div>
  </details>
</div>

as text

at rest

┌──────────────────────────────────────┐
│ ▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
└──────────────────────────────────────┘

hover

┌──────────────────────────────────────┐
│ ▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
└──────────────────────────────────────┘

focus

┌──────────────────────────────────────┐
│❯▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
└──────────────────────────────────────┘

at rest

┌──────────────────────────────────────┐
│ ▾ the bait                           │
│                                      │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
│                                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
│                                      │
└──────────────────────────────────────┘

hover

┌──────────────────────────────────────┐
│ ▾ the bait                           │
│                                      │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
│                                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
│                                      │
└──────────────────────────────────────┘

focus

┌──────────────────────────────────────┐
│❯▾ the bait                           │
│                                      │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
│                                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
│                                      │
└──────────────────────────────────────┘

at rest

╭──────────────────────────────────────╮
│ ▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
╰──────────────────────────────────────╯

hover

╭──────────────────────────────────────╮
│ ▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
╰──────────────────────────────────────╯

focus

╭──────────────────────────────────────╮
│❯▾ the bait                           │
│                                      │
│ first prize is the corley hardtail.  │
│                                      │
├──────────────────────────────────────┤
│ ▸ the collision                      │
├──────────────────────────────────────┤
│ ▸ the disguises                      │
╰──────────────────────────────────────╯

at rest

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ▾ the bait                           ┃
┃                                      ┃
┃ first prize is the corley hardtail.  ┃
┃                                      ┃
┠──────────────────────────────────────┨
┃ ▸ the collision                      ┃
┠──────────────────────────────────────┨
┃ ▸ the disguises                      ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

hover

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ▾ the bait                           ┃
┃                                      ┃
┃ first prize is the corley hardtail.  ┃
┃                                      ┃
┠──────────────────────────────────────┨
┃ ▸ the collision                      ┃
┠──────────────────────────────────────┨
┃ ▸ the disguises                      ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

focus

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃❯▾ the bait                           ┃
┃                                      ┃
┃ first prize is the corley hardtail.  ┃
┃                                      ┃
┠──────────────────────────────────────┨
┃ ▸ the collision                      ┃
┠──────────────────────────────────────┨
┃ ▸ the disguises                      ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

at rest

╔══════════════════════════════════════╗
║ ▾ the bait                           ║
║                                      ║
║ first prize is the corley hardtail.  ║
║                                      ║
╟──────────────────────────────────────╢
║ ▸ the collision                      ║
╟──────────────────────────────────────╢
║ ▸ the disguises                      ║
╚══════════════════════════════════════╝

hover

╔══════════════════════════════════════╗
║ ▾ the bait                           ║
║                                      ║
║ first prize is the corley hardtail.  ║
║                                      ║
╟──────────────────────────────────────╢
║ ▸ the collision                      ║
╟──────────────────────────────────────╢
║ ▸ the disguises                      ║
╚══════════════════════════════════════╝

focus

╔══════════════════════════════════════╗
║❯▾ the bait                           ║
║                                      ║
║ first prize is the corley hardtail.  ║
║                                      ║
╟──────────────────────────────────────╢
║ ▸ the collision                      ║
╟──────────────────────────────────────╢
║ ▸ the disguises                      ║
╚══════════════════════════════════════╝

props

Accordion

variant'boxed' | 'dense'= 'boxed': boxed rings the stack and rules between its items; dense is the bare stack.
spaciousboolean: Gives each header two rows, its title in the first: a 32px target, which meets WCAG 2.5.8 in the dense stack too.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the boxed stack's ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed stack's ring's start side, over borderX and border.

it also takes any other attribute of its <div>.

AccordionItem

titlestring: The header row's text, after the ▾ / ▸ glyph.
defaultOpenboolean: The initial open state; the native disclosure owns it from there.
openboolean: The open state, held by the consumer; pair it with onOpenChange.; binds with v-model:open in vue, bind:open in svelte
onOpenChange(open: boolean) => void: Called with the new open state when the section opens or closes.
headingAs'h2' | 'h3' | 'h4' | 'h5' | 'h6': The heading the title sits in, for a screen reader's list of headings.

it also takes any other attribute of its <details>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

Accordion

default: The sections, an AccordionItem each.

AccordionItem

default: The section's content, under its header row.