Navigation and interaction

Accordion

Single or multiple disclosure sections.

Live example

What is shared?

Tokens, classes, states, and behavior.

Which frameworks?

Native, React, and Svelte.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Accordion } from "@cofob/design-system-react";

/**
 * Complete Accordion parameter reference.
 * @param items
 *   type: readonly adapter-specific item[]
 *   required
 *   example: {items}
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: ["overview"]
 * @param onValueChange
 *   type: (value: string | readonly string[]) => void
 *   default: —
 *   example: {handleValueChange}
 * @param multiple
 *   type: boolean
 *   default: false
 *   example: true
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AccordionExample() {
  return (
    <Accordion items={items} />
  );
}

Svelte

<script lang="ts">
  import { Accordion } from "@cofob/design-system-svelte";

  // Complete Accordion parameter reference.
  // items
  //   type: readonly adapter-specific item[]
  //   required
  //   example: {items}
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: ["overview"]
  // onValueChange
  //   type: (value: string | readonly string[]) => void
  //   default: —
  //   example: {handleValueChange}
  // multiple
  //   type: boolean
  //   default: false
  //   example: true
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Accordion items={items} />

HTML

<!--
  Complete Accordion parameter reference.
  items
    type: readonly adapter-specific item[]
    required
    example: {items}
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: ["overview"]
  onValueChange
    type: (value: string | readonly string[]) => void
    default: —
    example: {handleValueChange}
  multiple
    type: boolean
    default: false
    example: true
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-accordion" data-cf-accordion><details>…</details></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-accordion`
Adapters	Native · React · Svelte
Primary props	items · value/defaultValue · onValueChange · multiple · children · div attributes
Documented states	closed · open · disabled · single/multiple
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`items`required	`readonly adapter-specific item[]`	`required`	React · Svelte · HTML	`{items}`	Structured items including IDs, labels, disabled state, and optional destinations.
`value/defaultValue`	`string or string[]; controlled or initial value`	`—`	React · Svelte · HTML	`["overview"]`	Use the first form for controlled state and the second for initial state.
`onValueChange`	`(value: string \| readonly string[]) => void`	`—`	React · Svelte · HTML	`{handleValueChange}`	Reports a user-driven tab or accordion value change.
`multiple`	`boolean`	`false`	React · Svelte · HTML	`true`	Allows more than one accordion item to stay open.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.