MiHCM
layout/@mihcm/ui·v0.21.0·stable

Accordion

Vertically stacked collapsible sections. Supports single (one open) and multiple (any number open) modes with animated height transitions.

Default

Single-open accordion with bottom borders. The classic FAQ pattern.

You can return items within 30 days of purchase. Items must be in their original condition with tags attached.
<Accordion type="single" defaultValue="faq-1">
  <AccordionItem value="faq-1">
    <AccordionTrigger>What is the return policy?</AccordionTrigger>
    <AccordionContent>You can return items within 30 days…</AccordionContent>
  </AccordionItem>

</Accordion>

Multiple sections open

Set type="multiple" to allow any number of sections open at once.

You can return items within 30 days.
Yes, we ship to over 50 countries.
<Accordion type="multiple" defaultValue={['faq-1', 'faq-3']}>

</Accordion>

Bordered variant

Each item wrapped in a card-style container with rounded corners and a subtle shadow when open.

Manage your account preferences, notification settings, and security options from the settings page.
<Accordion type="single" variant="bordered">
  <AccordionItem value="item-1">
    <AccordionTrigger>Account settings</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>

</Accordion>

Flush variant

Minimal style — no borders, tight spacing. Useful inside cards or sidebars.

A high-level summary of your project metrics and recent activity.
<Accordion type="single" variant="flush">
  <AccordionItem value="item-1">
    <AccordionTrigger>Overview</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>

</Accordion>

Disabled item

Individual items can be disabled to prevent interaction.

<AccordionItem value="locked" disabled>
  <AccordionTrigger disabled>Premium features (upgrade required)</AccordionTrigger>
  <AccordionContent>Upgrade to access.</AccordionContent>
</AccordionItem>