Skip to main content
Browse docs

Marwes documentation

Accordion

Grouped disclosure family with a low-level accordion component, a canonical AccordionField path, and thin purpose-accordion wrappers.

What this family solves

Grouped disclosure family with a low-level accordion component, a canonical AccordionField path, and thin purpose-accordion wrappers.

Use when

  • The UI needs collapsible sections with grouped labeling, optional description, and optional error support.
  • The product flow maps clearly to FAQAccordion, SettingsAccordion, or SectionsAccordion and benefits from self-documenting purpose metadata.
  • The team wants React and Vue accordion behavior to stay aligned through shared core helpers and one contract file.

Avoid when

  • A different pattern such as tabs, dialog, or simple always-visible content is the more honest interaction model.
  • The implementation only needs a standalone disclosure but cannot own parent state coordination or surrounding list semantics.
  • The team expects advanced focus orchestration, nested accordion policy, or lazy mounting behavior that this family does not currently define.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

AccordionField, FAQAccordion, SectionsAccordion, SettingsAccordion

Types

AccordionFieldItem, AccordionFieldProps, FAQAccordionProps, SectionsAccordionProps, SettingsAccordionProps

Vue — @marwes-ui/vue

Components

AccordionField, FAQAccordion, SectionsAccordion, SettingsAccordion

Types

AccordionFieldItem, AccordionFieldProps, FAQAccordionProps, SectionsAccordionProps, SettingsAccordionProps

Svelte — @marwes-ui/svelte

Components

AccordionField, FAQAccordion, SectionsAccordion, SettingsAccordion

Types

AccordionFieldItem, AccordionFieldProps, FAQAccordionProps, SectionsAccordionProps, SettingsAccordionProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { AccordionField } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [openItems, setOpenItems] = useState<string[]>(["1"])

  return (
    <AccordionField
      label=""
      items={[
        { value: "1", title: "Accordion title", content: "First section content." },
        { value: "2", title: "Accordion title", content: "Second section content." },
        { value: "3", title: "Accordion title", content: "Third section content." },
      ]}
      openItems={openItems}
      onOpenItemsChange={setOpenItems}
    />
  )
}

Vue

<script setup lang="ts">
import { ref } from "vue"
import { AccordionField } from "@marwes-ui/vue"

const openItems = ref<string[]>(["1"])
</script>

<template>
  <AccordionField
    label=""
    :items="[
      { value: '1', title: 'Accordion title', content: 'First section content.' },
      { value: '2', title: 'Accordion title', content: 'Second section content.' },
      { value: '3', title: 'Accordion title', content: 'Third section content.' },
    ]"
    v-model:open-items="openItems"
  />
</template>

Svelte

<script lang="ts">
  import { AccordionField } from "@marwes-ui/svelte"

  let openItems = $state<string[]>(["1"])
</script>

<AccordionField
  label=""
  items={[
    { value: "1", title: "Accordion title", content: "First section content." },
    { value: "2", title: "Accordion title", content: "Second section content." },
    { value: "3", title: "Accordion title", content: "Third section content." },
  ]}
  {openItems}
  onopenitemschange={(items) => (openItems = items)}
/>

Accessibility requirements

  • Intentional open behavior: Keep single-open vs multi-open behavior intentional; do not silently change it between renders.
  • State announcement: Verify expand and collapse state and content are announced correctly to screen readers.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Real browser and assistive-technology validation for grouped reading flow, focus visibility, and open-state comprehension.
  • Manual review 2: Future decisions about which accordion stories should join stricter automated accessibility gates.
  • Manual review 3: Whether purpose metadata should eventually move from package-local tests into the shared accordion contract.

Theming

Accordion uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources