KikitaUiDocs

General settings

Configure display and behavior options.

Notifications

Security

mode

appearance

size

item 1 header

item 2 header

item 3 header

State

disable item 3item 1 icon

<kui-accordion>
  <kui-accordion-item id="general" header="General settings">
    Configure display and behavior options.
  </kui-accordion-item>
  <kui-accordion-item id="notifications" header="Notifications">
    Manage push notifications and email digests.
  </kui-accordion-item>
  <kui-accordion-item id="security" header="Security">
    Account security parameters.
  </kui-accordion-item>
</kui-accordion>

No events yet.

Name	Type	Default	Description
mode	`'exclusive' \| 'multi'`	`'exclusive'`	Toggle mode. exclusive keeps a single section open at a time; multi allows any number of sections open simultaneously. A plain input, not two-way bindable. Falls back to defaults.accordion.mode.
appearance	`'default' \| 'bordered' \| 'ghost'`	`'default'`	Container and divider treatment: default uses bottom borders between items, bordered wraps each item in its own bordered block, ghost has no borders. A plain input; falls back to defaults.accordion.appearance.
size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Trigger height and text size. A plain input; falls back to defaults.accordion.size, then the global defaults.size.
expandedItems	`string[]`	`[]`	IDs of currently expanded items. The only mutable state of the accordion and the only two-way bindable one: use [(expandedItems)] or listen to (expandedItemsChange).
header	`string`	`''`	kui-accordion-item: trigger label text.
id	`string`	`auto-generated`	kui-accordion-item: stable ID used for state tracking and ARIA wiring. The generated default is numbered per Angular application, so server-rendered ids match the browser.
disabled	`boolean`	`false`	kui-accordion-item: removes the trigger from tab order and prevents toggling the section.
kuiAccordionIcon	`-`	`-`	Marker directive for an ng-template projected into a kui-accordion-item trigger, before the label text.
provideKuiDefaults({ accordion })	`(defaults: KuiComponentDefaults) => Provider`	`-`	Sets size, mode, appearance and disclosureIcon for a subtree; provideKikitaUi({ defaults }) does it for the whole application.
KuiAccordionOptions	`interface`	`-`	Shape of defaults.accordion. disclosureIcon takes precedence over defaults.icons.disclosure.
KuiAccordionMode / KuiAccordionAppearance	`type aliases`	`-`	Public unions of the mode and appearance values.

Inputs, provider defaults and tokens verified against @kikita-labs/ui v2.0.0 v2.0.0 public typings.

Accordion — Playground