Accordion
Disclosure component for grouped expandable content.
Accordion composes a container component and an item component.
import { KuiAccordion, KuiAccordionItem } from '@kikita-labs/ui';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>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>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>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 name="settings" />
</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>Set defaults.accordion once for the application or for a subtree. Each option resolves as local input > defaults.accordion.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
accordion: {
/* options below */
},
},
}),
],
};disclosureIcon replaces the expand icon of every trigger and takes precedence over defaults.icons.disclosure.
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | — | Component size. Takes precedence over the global defaults.size. |
| mode | 'exclusive' | 'multi' | — | Default mode. |
| appearance | 'default' | 'bordered' | 'ghost' | — | Default appearance. |
| disclosureIcon | KuiIconGlyph | — | Icon of the expand control. Takes precedence over defaults.icons.disclosure. See Structural Icons. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-accordion-trigger-focus-ring-color | CSS custom property | --kui-color-focus | Trigger focus ring color |
| --kui-accordion-icon-color | CSS custom property | --kui-color-text-secondary | Icon color |
| --kui-accordion-chevron-color | CSS custom property | --kui-color-text-secondary | Chevron color |
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-accordion-trigger-gap | CSS custom property | --kui-space-2 | Trigger gap |
| --kui-accordion-trigger-font-size | CSS custom property | --kui-text-base-size | Trigger font size |
| --kui-accordion-trigger-radius-focus | CSS custom property | --kui-radius-xs | Trigger corner radius, focus |
| --kui-accordion-body-content-font-size | CSS custom property | --kui-text-sm-size | Body content font size |
| --kui-accordion-trigger-font-size-sm | CSS custom property | --kui-text-sm-size | Trigger font size, sm |
| --kui-accordion-trigger-font-size-lg | CSS custom property | --kui-text-md-size | Trigger font size, lg |
| --kui-accordion-body-content-padding-bottom-sm | CSS custom property | --kui-space-3 | Body content padding, bottom sm |
| --kui-accordion-body-content-padding-top-lg | CSS custom property | --kui-space-3 | Body content padding, top lg |
| --kui-accordion-body-content-padding-bottom-lg | CSS custom property | --kui-space-5 | Body content padding, bottom lg |
| --kui-accordion-body-content-padding-block-start | CSS custom property | --kui-space-1 | Body content padding, block start |
| --kui-accordion-body-content-padding-block-end | CSS custom property | --kui-space-4 | Body content padding, block end |
| --kui-accordion-trigger-min-height-sm | CSS custom property | 36px | Trigger minimum height, sm |
| --kui-accordion-trigger-min-height-lg | CSS custom property | 52px | Trigger minimum height, lg |
Inputs, provider defaults and tokens verified against @kikita-labs/ui v2.0.0 v2.0.0 public typings.
| 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. |
Each item renders a native button trigger with ARIA disclosure semantics.
- Each trigger is a native
<button>witharia-expandedandaria-controlspointing at its body region. - The body region is linked back to the trigger through
aria-labelledby. disableditems setaria-disabled="true"and are removed from tab order.- Activating a trigger with a click,
Enter, orSpacetoggles the section. Tabmoves focus between triggers in document order; Accordion does not trap or override arrow-key focus.- Trigger focus is a solid 2px outline in
--kui-color-focus(--kui-accordion-trigger-focus-ring-color). - 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.mdin the library repository for current review status.
Consumer-visible changes of @kikita-labs/ui 2.0 for the accordion.
- The classes are
KuiAccordion,KuiAccordionItemandKuiAccordionIcon(they had aComponentorDirectivesuffix).ng update @kikita-labs/uirenames the imports. mode,appearanceandsizeare plain configuration inputs and no longer two-way models; onlyexpandedItemsis two-way bindable.- Defaults come from
defaults.accordion. Body text uses a line height of 1.6 (it was 1.65), and the trigger minimum heights of the small and large sizes are tokens. - The expand chevron is drawn by the shared structural icon renderer.
<!-- 1.x: mode, appearance and size were two-way models -->
<kui-accordion [(mode)]="mode" />
<!-- 2.0: plain inputs; only expandedItems is two-way -->
<kui-accordion [mode]="mode()" [(expandedItems)]="expanded" />