Accordion

Accordion with collapsible items, accordion-level behavior, and initial state control.

Package: @solidiom/accordion
Version: 0.0.1-next.0
Status: stable

Examples

The live example demonstrates a single-expand collapsible accordion. Press ArrowDown/ArrowUp to move focus between triggers, Home/End to jump to the first or last trigger, and Enter or Space to toggle the focused section.

import * as Accordion from "@solidiom/accordion"

;<Accordion.Root type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Solidiom?</Accordion.Trigger>
    <Accordion.Content>
      A component kit for SolidJS built on semantic HTML, accessible by default.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes, it follows the WAI-ARIA Authoring Practices for accordion patterns.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Accordion-level options

The type prop controls whether items are independent (multiple) or mutually exclusive (single). With collapsible, all items can be closed simultaneously.

A component kit for SolidJS built on semantic HTML, accessible by default.

View source

        export function AccordionExample(props: AccordionExampleProps) {
  const copy = () => COPY[props.locale]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="accordion-example"
      data-accordion-example
    >
      <Accordion.Root type="single" collapsible defaultValue={["item-0"]}>
        {copy().items.map((item, index) => (
          <Accordion.Item value={`item-${index}`}>
            <Accordion.Trigger>{item.trigger}</Accordion.Trigger>
            <Accordion.Content>{item.content}</Accordion.Content>
          </Accordion.Item>
        ))}
      </Accordion.Root>
    </div>
  )
}