Accordion

Questions and answers, each a native <details>.

import { Accordion } from '@zitdevs/ui';

Examples

Can ZitDevs replace an in-house IT employee?

In many cases a managed agreement covers the responsibilities of an in-house role.

Can we hire ZitDevs for a single project?

Yes. Projects have a defined scope, schedule and delivery plan.

How quickly do you respond?

Within one business day, and within the hour for an incident under a support plan.

Can ZitDevs replace an in-house IT employee?

In many cases a managed agreement covers the responsibilities of an in-house role.

Can we hire ZitDevs for a single project?

Yes. Projects have a defined scope, schedule and delivery plan.

How quickly do you respond?

Within one business day, and within the hour for an incident under a support plan.

Inside a card that draws the frame, inset drops the outer rule and runs the row rules edge to edge:

Can ZitDevs replace an in-house IT employee?

In many cases a managed agreement covers the responsibilities of an in-house role.

Can we hire ZitDevs for a single project?

Yes. Projects have a defined scope, schedule and delivery plan.

How quickly do you respond?

Within one business day, and within the hour for an incident under a support plan.

<Accordion
  id="faq"
  items={[
    {
      question: 'Can we hire ZitDevs for a single project?',
      answer: 'Yes. Projects have a defined scope, schedule and delivery plan.',
    },
  ]}
  openIndex={0}
/>

Props

Prop	Type	Default	Notes
id	string	required	The root’s id, and the group name when exclusive.
items	readonly { question: string; answer: string }[]	required	Plain text. Questions must be unique: they key the rows.
openIndex	number	—	0-based index of the item that starts open.
exclusive	boolean	true	One answer open at a time, through the native name.
size	'md' | 'sm'	'md'	Rows of 68px / 56px.
surface	'light' | 'dark'	'light'	dark for the inverse and the primary band.
inset	boolean	false	Inside a card that draws the frame. Light fields only.
className	string	—	Placement.
anything else	<div> attributes	—

Exported types: AccordionProps, AccordionItem.

Accessibility

• <summary> is a native control: it opens on click, Enter and Space, and says whether it is expanded.
• The question sits directly in <summary>, not in a heading: several screen readers flatten a heading inside it, reading the summary as a button.
• Every answer stays in the document while collapsed, so in-page search finds it, and FAQPage structured data built from the same items stays truthful.
• Each question draws the kit’s focus ring; its marker stops turning for readers who ask for reduced motion.

Without JavaScript

It needs none. The items share the native name attribute, so the browser itself keeps one answer open at a time; exclusive={false} leaves them independent. A browser without exclusive <details> lets several open, and nothing else changes.

Theming

ink, body and border-default on a light field; on-inverse, on-inverse-muted and primary-inverse on a dark one; border-subtle when inset; the marker in primary or primary-inverse.

Use instead: one view out of several → Tabs.