Accordion

Draft

Accordion organizes collapsible Accordion Item components, providing consistent layout, styling, and accessibility for grouped expandable content.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdAccordion } from '@fbin-web/neighborhood-core';

Usage

<nbhd-accordion>
  <nbhd-accordion-item header="Accordion Item 1">
    <nbhd-text> This is the content for accordion item 1. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 2">
    <nbhd-text> This is the content for accordion item 2. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 3">
    <nbhd-text> This is the content for accordion item 3. </nbhd-text>
  </nbhd-accordion-item>
</nbhd-accordion>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdAccordion } from '@fbin-web/neighborhood-react';

Usage

import { NbhdAccordion, NbhdAccordionItem, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdAccordion>
      <NbhdAccordionItem header="Accordion Item 1">
        <NbhdText> This is the content for accordion item 1. </NbhdText>
      </NbhdAccordionItem>

      <NbhdAccordionItem header="Accordion Item 2">
        <NbhdText> This is the content for accordion item 2. </NbhdText>
      </NbhdAccordionItem>

      <NbhdAccordionItem header="Accordion Item 3">
        <NbhdText> This is the content for accordion item 3. </NbhdText>
      </NbhdAccordionItem>
    </NbhdAccordion>
  </>
);

Usage

Only accepts Accordion Item children.

Properties

Property	Attribute	Type	Default	Description
`allowMultiple`	`allow-multiple`	`boolean`	`false`	Allow multiple accordion items to be open at the same time.

Slots

Name	Description
`(default)`	The default slot for accordion items.

CSS Properties

Set these on nbhd-accordion or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-accordion-item-borderBlockEndColor`	`--nbhd-context-color-control-border`	Adapts to surface
`--nbhd-accordion-item-borderBlockEndStyle`	—	`solid`
`--nbhd-accordion-item-borderBlockEndWidth`	`--nbhd-border-width-subtle`	`1px`

Dependencies

Child components <nbhd-accordion> renders internally. Import them too when you tree-shake.

Accordion ItemDraft <nbhd-accordion-item>