Collapse

Stows content in collapsible panels to keep the focus on key information.

Basic Usage

Multiple panels open at once

Includes basic info such as team, milestones, and budget.

The component library is built on Web Components standards.

Iterates by version, running the engineering discipline checklist before each release.

Example

active controls the set of expanded panels (name values comma-separated); by default multiple panels can be open at the same time.

Accordion

Accordion mode

Only one panel can be open at a time.

Opening a new panel automatically collapses the previous one.

Clicking an already-open panel collapses it.

Example

All Collapsed

All collapsed by default

All panels are collapsed by default.

Click the header to expand.

Example

Events

Expansion state events

Content 1

Content 2

Currently open: a

Example

Borderless FAQ

Borderless FAQ (accordion + icon on the left)

Install the core package with your package manager and register the component families at the entry.

All colors come from design tokens, so dark variants apply automatically.

Yes. The SSR snapshot and client rendering share the same template and hydrate seamlessly.

Example

variant="borderless" is a ghost form without borders: the group outline, radius, and item separators are removed — a good fit for FAQs, settings pages, and other weak-boundary scenes.

Icon Placement

Side-nav style (icon-placement="start")

Installation, quick start, and theming.

Browse by basic, form, feedback, navigation, and other families.

Design tokens, icons, and changelogs.

Example

The icon sits on the right of the title by default (end); icon-placement="start" places it on the left. A single oas-collapse-item can also set the attribute to override the container value.

Rich Header and Extra Actions

Custom header and extra action area

Release plan (biweekly iteration)Settings

The title comes from slot="header", which takes precedence over the header attribute.

Export

slot="extra" sits on the right of the header; clicks inside it never toggle the panel.

Example

• slot="header": rich-text title, mutually exclusive with the header attribute (slot wins). If you place interactive elements in the title, call stopPropagation on click in the host to avoid toggling.
• slot="extra": right-side action area. The component already stops its clicks from reaching the collapse interaction, so buttons and controls are safe inside.

Uncontrolled Initial Value

default-active (uncontrolled)

Expanded from default-active on the first frame; state is then self-managed and never written back to the active attribute.

Click any panel to toggle freely.

Example

default-active is only the uncontrolled initial value. Once the active attribute is set the component becomes controlled and default-active no longer applies.

Disabled Panel

A disabled panel cannot be expanded

Expands normally.

Disabled: not focusable, not clickable.

Example

A disabled panel is visually de-emphasized and is skipped by keyboard roving and expandAll().

Locked Open

no-collapse keeps the current panel open

Once expanded, clicking its own header no longer collapses it.

Other panels are unaffected.

Example

no-collapse only guards header clicks; collapseAll() still force-collapses everything.

Before-Collapse Guard

Cancelable oas-before-collapse event

Mark as "unsaved"

Check the box, then click this panel's header — the collapse is intercepted with a notice.

Not affected by the guard.

Example

oas-before-collapse is cancelable, detail: { name, next }; the host calls preventDefault() to block the toggle (it fires before both expand and collapse).

Nested Panels

Nested collapse panels

Inner events never disturb the outer panel.

Each level manages its own active set.

Example

Custom Toggle Icon

template[slot="toggle"] custom expand icon

The toggle icon becomes a downward chevron that rotates with the expanded state.

Without a toggle template the default arrow renders.

Example

Expand All / Collapse All

expandAll() / collapseAll() methods

Expand allCollapse all

Content 1

Content 2

Methods skip disabled items.

Example

The container provides the imperative methods expandAll() / collapseAll(). In accordion mode expandAll() expands only the first panel; both methods skip disabled items and dispatch oas-change.

Render Strategy & Heading Level

destroy-on-collapse / force-render / heading-level

Content stays in the DOM; collapsing only hides it.

Content is removed from the DOM on collapse and re-mounted on next expand (collapse animation is skipped).

The default slot is always rendered; combined with destroy-on-collapse, force-render keeps the content mounted even when collapsed (for text-retrieval scenarios).

Container heading-level="3": panel titles get the heading role (aria-level=3) so screen readers can navigate by headings; items may override it individually.

Example

Collapsed-State Summary (summary)

Report the inner value at the header tail while collapsed; hidden when expanded

Shadow parameter controls (the summary is not repeated while expanded).

Radius parameter controls: this panel starts expanded, so its summary is hidden.

When the summary exceeds the available width it is truncated with a single-line ellipsis, never squeezing out the title.

Example

summary shows the panel's inner value (e.g. the current parameter) at the header tail while collapsed — readable without expanding; it hides automatically when expanded (no duplicate display or announcement). The summary is single-line text truncated with an ellipsis; it lives inside the collapsible header button so screen readers can read it in the collapsed state, and carries no heading semantics.

API

oas-collapse

Attributes

Attribute	Description	Type	Default
accordion	Accordion mode; only one panel open at a time	boolean	—
active	Set of expanded panel name values (comma-separated)	—	—
default-active	Uncontrolled initial expanded set (comma-separated names): first-frame seed, then self-managed; controlled when active is present	—	—
heading-level	Panel heading semantic level 1-6 / none (default): 1-6 attaches heading role + aria-level (a11y)	string	—
icon-placement	Expand icon placement: start (left of title) / end (default, right); overridable per item	string	end
variant	Variant: outlined (default, bordered rounded container) / borderless (ghost, no border)	—	—

Events

Event	Description
oas-before-collapse	Fired before expand/collapse (cancelable), detail: { name, next }; preventDefault() blocks the toggle (not fired by expandAll/collapseAll)
oas-change	Expansion state change, detail: { active: string[] }

Slots

Name	Description
default	Collapse panels (oas-collapse-item)

oas-collapse-item

Attributes

Attribute	Description	Type	Default
destroy-on-collapse	Destroy panel content on collapse (re-mounted on next expand; collapse animation skipped)	boolean	—
disabled	Disable the panel: not focusable, not clickable (expandAll skips it)	boolean	—
force-render	Render panel content up front (collapsed content is not rendered by default)	boolean	—
header	Panel title	string	—
heading-level	Per-item override of the heading semantic level (1-6 / none)	string	—
icon-placement	Per-item override of the container icon placement (start / end)	—	—
name	Unique identifier of the panel	—	—
no-collapse	Lock the expanded state: clicking itself does not collapse (other panels unaffected)	—	—
open	Whether it is expanded (managed by the container)	boolean	—
summary	Collapsed-state summary: shown at the header tail while the panel is collapsed (report the inner value without expanding, e.g. "12px 4px"), hidden when expanded; single line with ellipsis truncation; carries no heading semantics	string	—

Slots

Name	Description
default	Panel content
extra	Panel header right-side action area (clicks inside do not toggle)
header	Rich panel header (mutually exclusive with the header attribute, slot wins; interactive children should stopPropagation)
template[slot="toggle"]	Custom expand icon template (built-in arrow by default)