The Accordion component is used to organize content into collapsible sections.
It improves readability and allows users to focus on specific information while hiding other content.

• Collapsible sections: Users can expand or collapse items to view content.
• Dynamic control: Supports auto-focus, disabling items, and variant styling.
• Flexible content: Each accordion item can contain any type of content, including text, lists, or other components.

Variant

Use the variant prop to change the visual style of the accordion.

Preview

contained

index: 0

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

outlined

index: 1

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

text

index: 2

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Accordion } from "@fefade-ui/svelte"
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  {#each Constants.variants as variant, i (variant)}
    <Accordion id="sec{i}" {variant} label={variant}>
      <div style="line-height: 1.5;">
        <strong>index: {i}</strong>
        <p>
          Id provident praesentium, incidunt, quisquam ullam numquam aliquid
          dolorem, quae labore dignissimos minima assumenda. Reprehenderit
          nostrum minima perferendis eos quisquam ipsa quo!
        </p>
      </div>
    </Accordion>
  {/each}
</div>

Auto Focus

Use the autofocus prop to automatically expand a specific accordion item on load.

Preview

Auto Focus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

Code

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

<Accordion id="autofocus" label="Auto Focus" autofocus>
  <div style="line-height: 1.5;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae
      a minus accusantium perspiciatis numquam fugiat officiis esse fugit
      consectetur vero natus accusamus autem quos, voluptate dignissimos
      deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing
      elit.
    </p>

    <p>
      Id provident praesentium, incidunt, quisquam ullam numquam aliquid
      dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum
      minima perferendis eos quisquam ipsa quo!
    </p>
  </div>
</Accordion>

Disabled

Use the disabled prop to prevent user interaction with specific accordion items.

Preview

Disabled

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Code

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

<Accordion id="disabled" label="Disabled" disabled>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a
    minus accusantium perspiciatis numquam fugiat officiis esse fugit
    consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt
    nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </p>
</Accordion>

Props

Prop	Type	Default	Description
variant	string	"default"	Changes the visual style of the accordion.
autofocus	number	undefined	Index of the accordion item to expand automatically on load.
disabled	boolean | number[]	false	Disables interaction for a specific item (index) or multiple items (array of indices).