Surfaces

Stable - @kikita-labs/ui v1.6.1 v1.6.1

Accordion

Disclosure component for grouped expandable content.

Import

Accordion composes a container component and an item component.

accordion.ts
import { KuiAccordionComponent, KuiAccordionItemComponent } from '@kikita-labs/ui';

Usage

Open in Playground

Give every kui-accordion-item a stable id and a header label. Only one section stays open at a time by default.

<kui-accordion mode="exclusive" appearance="default" size="md">
  <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>

Multi mode

Set mode to multi to let consumers keep any number of sections open at once. expandedItems is two-way bindable.

Profile content.
<kui-accordion mode="multi" [(expandedItems)]="expanded">
  <kui-accordion-item id="profile" header="Profile">Profile content.</kui-accordion-item>
  <kui-accordion-item id="billing" header="Billing">Billing content.</kui-accordion-item>
  <kui-accordion-item id="team" header="Team members">Team content.</kui-accordion-item>
</kui-accordion>

Appearance

default uses bottom borders between items, bordered wraps each item in its own bordered block, ghost has no borders or dividers.

bordered

ghost

<div class="appearance-accordion-example">
  <div class="appearance-accordion-example__col">
    <p class="appearance-accordion-example__label">bordered</p>
    <kui-accordion appearance="bordered">
      <kui-accordion-item id="bordered-general" header="General settings">
        Configure display and behavior options.
      </kui-accordion-item>
      <kui-accordion-item id="bordered-security" header="Security">
        Account security parameters.
      </kui-accordion-item>
    </kui-accordion>
  </div>

  <div class="appearance-accordion-example__col">
    <p class="appearance-accordion-example__label">ghost</p>
    <kui-accordion appearance="ghost">
      <kui-accordion-item id="ghost-general" header="General settings">
        Configure display and behavior options.
      </kui-accordion-item>
      <kui-accordion-item id="ghost-security" header="Security">
        Account security parameters.
      </kui-accordion-item>
    </kui-accordion>
  </div>
</div>

Icon slot and disabled items

Project an ng-template marked with kuiAccordionIcon for a leading trigger icon. disabled removes an item from tab order and blocks toggling.

<kui-accordion appearance="bordered">
  <kui-accordion-item id="settings" header="Settings">
    <ng-template kuiAccordionIcon>
      <kui-icon [source]="settingsIcon" />
    </ng-template>
    Settings content with a leading icon slot.
  </kui-accordion-item>

  <kui-accordion-item id="disabled" header="Archived project" [disabled]="true">
    This section is disabled and cannot be toggled.
  </kui-accordion-item>
</kui-accordion>

API

Inputs verified against @kikita-labs/ui v1.6.1 v1.6.1 public typings.

NameTypeDefaultDescription
mode'exclusive' | 'multi''exclusive'Toggle mode. exclusive keeps a single section open at a time; multi allows any number of sections open simultaneously. Two-way bindable.
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.
size'xs' | 'sm' | 'md' | 'lg''md'Trigger height and text size.
expandedItemsstring[][]IDs of currently expanded items. Supports two-way binding with [(expandedItems)]; mutations are reflected back through the model.
headerstring''kui-accordion-item: trigger label text.
idstringauto-generatedkui-accordion-item: stable ID used for state tracking and ARIA wiring.
disabledbooleanfalsekui-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.

Accessibility

Each item renders a native button trigger with ARIA disclosure semantics.

  • Each trigger is a native <button> with aria-expanded and aria-controls pointing at its body region.
  • The body region is linked back to the trigger through aria-labelledby.
  • disabled items set aria-disabled="true" and are removed from tab order.
  • Activating a trigger with a click, Enter, or Space toggles the section.
  • Tab moves focus between triggers in document order; Accordion does not trap or override arrow-key focus.
  • Accordion covers native disclosure semantics and static ARIA review. Screen reader and other assistive-technology verification has not been completed for this primitive yet; see state-coverage.md in the library repository for current review status.