Components / Collapsible

Collapsible

A native disclosure with controlled or local open state.

example.component.html

html

<aevko-collapsible label="Details" [(open)]="open">
  ...
</aevko-collapsible>

Installation

npx aevko-ui@latest add collapsible --yes

Source ownership

Customization

Change trigger layout, borders and disclosure motion in local source. Project a custom indicator when the inline chevron does not fit the product language.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Visible label and accessible name for the disclosure trigger.
`open`	`model<boolean>`	`false`	Controlled or local expanded state.
`disabled`	`boolean`	`false`	Prevents the trigger from changing state.
`panelId`	`string`	`'aevko-collapsible-panel'`	Id referenced by aria-controls.
`aevkoCollapsibleIcon`	`projected slot`	`inline SVG`	Replaces the disclosure fallback icon.

Accessibility contract

Accessibility

Included behavior

A native button reports aria-expanded and owns the disclosed region.

Your responsibility

Use a unique panelId when several disclosures share a page and keep the trigger label meaningful in both states.

Back to all components