Accordion
MD3 expansion panels.
Walkthrough
1. Basic
single closes the others when one opens — an FAQ, where one answer at a time is the point. collapsible lets the last one close too.
Three to five working days inside Iraq.
Within 14 days, unopened, with the receipt.
Cash on delivery, FIB, and Visa.
<script lang="ts"> import { Accordion, AccordionItem } from 'omaris';</script><div class="w-full max-w-lg"> <Accordion value={['delivery']}> <AccordionItem value="delivery" title="How long does delivery take?"> <p class="text-body-md text-muted-foreground">Three to five working days inside Iraq.</p> </AccordionItem> <AccordionItem value="returns" title="Can I return an order?"> <p class="text-body-md text-muted-foreground">Within 14 days, unopened, with the receipt.</p> </AccordionItem> <AccordionItem value="payment" title="Which payment methods work?"> <p class="text-body-md text-muted-foreground">Cash on delivery, FIB, and Visa.</p> </AccordionItem> </Accordion></div>2. Variants and multiple
multiple lets several stay open and separated gives each its own card — the shape for stages that are each their own thing.
bun install, bun run build.
Two snapshots and one timeout.
Blocked by the failing tests.
<script lang="ts"> import { Accordion, AccordionItem } from 'omaris'; let open = $state(['build']);</script><div class="w-full max-w-lg"> <Accordion type="multiple" variant="separated" bind:value={open}> <AccordionItem value="build" title="Build" supportingText="Passed in 42s"> <p class="text-body-md text-muted-foreground">bun install, bun run build.</p> </AccordionItem> <AccordionItem value="test" title="Test" supportingText="3 failing"> <p class="text-body-md text-muted-foreground">Two snapshots and one timeout.</p> </AccordionItem> <AccordionItem value="deploy" title="Deploy" supportingText="Skipped" disabled> <p class="text-body-md text-muted-foreground">Blocked by the failing tests.</p> </AccordionItem> </Accordion></div>