Skip to content
omaris

Containment

Accordion

MD3 expansion panels.

import { Accordion } from 'omaris'
Learn

Examples

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>

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>

When to use it

Use it for

  • Stacked sections people scan by heading and open one at a time: an FAQ, a settings page's groups, the stages of a build. type="single" opens one and closes the rest.
  • Sections read together, like a filter panel or a checklist, where several stay open. Use type="multiple", usually with variant="separated" so each panel is its own card.
  • Open state that lives elsewhere. value is the whole open set and is bindable, so it can come from the URL or storage.
  • A header that carries status. supportingText for "Passed in 42s", end for a badge or a count, disabled for a stage that cannot open yet.

Not for

  • Peers of equal weight where exactly one is visible → Tabs.
  • One block behind a "Show more" → Collapsible.
  • Sections of a site's navigation → Navigation Drawer.
  • Rows the person picks from → List.

Do

  • Match the variant to the surface: plain flush on a page, outlined among other things, separated when each panel is its own item, like a pipeline stage or an order.
  • Keep the trigger to one line and a supportingText. Put content in the body.
  • Use disabled with a reason in supportingText ("Blocked by the failing tests") instead of hiding the panel.
  • Leave collapsible on. Turn it off only when an empty accordion makes no sense, like a wizard that must always show the current step.

Don't

  • Put a form's required fields in a closed panel. A hidden validation error blocks the submit.
  • Open every panel of a multiple accordion by default. That is a page with headings; use Text headings.
  • Put a button or a link in heading. The trigger is already a button.
  • Nest one accordion inside another.
Pairs with Badge Card List Divider Tabs

Quick reference

variant Accordion
  • plain (default)
  • separated
  • outlined
variant AccordionItem
  • plain
  • separated
  • outlined

API

Accordion

MD3 expansion panels.

type="single" is the classic accordion — opening one closes the rest. type="multiple" lets several stay open. Either way the open set is one bindable value, so it can be driven from a URL or restored from storage without the component owning the state.

import { Accordion } from 'omaris'

Props

value bindable

Defaults to []

string[]

Open item values. Bindable.

type

Defaults to 'single'

'single' | 'multiple'

single closes the others on open; multiple doesn't.

variant

Defaults to 'plain'

AccordionVariant
plain
Rows separated by hairlines, flush with the page.
separated
Each panel its own raised card.
outlined
One outlined block, rows divided inside it.
collapsible

Defaults to true

boolean

Stop the last open item from being closed.

class
string
children
Snippet

AccordionItem

One panel of an Accordion: a header you press and the content it reveals.

value is how the parent tracks it, so it has to be unique within the set.

import { AccordionItem } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
trigger
No description in the source yet.
headline
No description in the source yet.
supporting
No description in the source yet.
wrapper
The animated wrapper. A grid row going 0fr → 1fr is the one way to transition to a content-derived height without measuring it.
content
No description in the source yet.
inner
No description in the source yet.
chevron
No description in the source yet.

Props

value required
string

Identifies the panel in the accordion's value.

title
string

Trigger text.

supportingText
string

Second line in the trigger.

disabled

Defaults to false

boolean
class
string
classes
AccordionItemClasses

Per-part Tailwind overrides. class still covers the root.

icon
Snippet

Leading icon in the trigger.

heading
Snippet

Rich trigger content, in place of title.

end
Snippet

Trailing content before the chevron — a badge, a count.

children
Snippet

The panel body.