Accordion

A set of collapsible panels with headings. There is no border. An open trigger rests on the wash, and hover and focus shift that wash. The root is rounded. The trigger and panel are Regular.

Unstyled interface parts for Kalt products: accessible primitives with scoped CSS.

Open a component page and assemble the parts. If you’ve used unstyled libraries before, you’ll feel at home.

Yes. They’re the shared interface primitives for Kalt apps.

Anatomy

<UiAccordionRoot>
  <UiAccordionItem value="item">
    <UiAccordionHeader>
      <UiAccordionTrigger>Title</UiAccordionTrigger>
    </UiAccordionHeader>
    <UiAccordionPanel>Body</UiAccordionPanel>
  </UiAccordionItem>
</UiAccordionRoot>

Examples

Open multiple panels

Pass multiple so several panels can stay open at once.

Unstyled interface parts for Kalt products: accessible primitives with scoped CSS.

Open a component page and assemble the parts. If you’ve used unstyled libraries before, you’ll feel at home.

Yes. They’re the shared interface primitives for Kalt apps.

Hidden until found

hiddenUntilFound hides closed panels with hidden="until-found" so find-in-page can still search them. Search for “restocking” to open the matching panel. Closed panels stay mounted, which also keeps their contents indexable.

Disabled item

disabled on an item (or on Root for the whole accordion) sets data-disabled and ignores presses.

This panel can be opened.

This panel cannot be opened.

This panel can also be opened.

API reference

Root

Groups all parts of the accordion. Renders a <div>.

PropTypeDefaultDescription
defaultValuestring[][]Uncontrolled expanded item values.
valuestring[]—Controlled expanded values (v-model:value).
multiplebooleanfalseAllow more than one panel open.
disabledbooleanfalseIgnore interaction on every item.
hiddenUntilFoundbooleanfalseApply hidden="until-found" to closed panels. Overrides keepMounted.
keepMountedbooleantrueKeep closed panels in the DOM so the height transition can run. Ignored when hiddenUntilFound is set.
AttributeDescription
data-disabledPresent when the accordion is disabled.
data-orientationAlways vertical.

Item

Groups a header with its panel. Renders a <div>.

PropTypeDefaultDescription
valuestringgenerated idUnique id for this item. Required when controlling value on Root.
disabledbooleanfalseIgnore interaction on this item.
AttributeDescription
data-openPresent when this item is open.
data-disabledPresent when this item is disabled.
data-indexZero-based index in the accordion.

Heading that labels the panel. Renders an <h3>.

AttributeDescription
data-openPresent when the item is open.
data-disabledPresent when the item is disabled.
data-indexZero-based index in the accordion.

Trigger

Button that opens and closes the panel. Renders a <button>. Sets aria-expanded and aria-controls. The plus icon rotates 45° when data-panel-open is set.

AttributeDescription
data-panel-openPresent when the panel is open.
data-disabledPresent when the item is disabled.

Panel

Collapsible region. Renders a <div role="region">. Height uses grid-template-rows: 0fr / 1fr with a short CSS transition (no animation library).

PropTypeDefaultDescription
hiddenUntilFoundbooleanfalseSearchable closed panel for this item only.
keepMountedbooleanfalseKeep this panel mounted while closed. Root keepMounted still applies.
AttributeDescription
data-openPresent when the panel is open.
data-disabledPresent when the item is disabled.
data-indexZero-based index in the accordion.
data-orientationAlways vertical.
data-starting-stylePresent while the panel is animating in.
data-ending-stylePresent while the panel is animating out.