Accordion Item

Draft

An Accordion Item is a single expandable section with its own header and content, used within an Accordion.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-accordion-item header="Accordion Item">
  <nbhd-text>
    This is the content of the accordion item. <a href="#">This is a link</a>.
  </nbhd-text>
</nbhd-accordion-item>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const App = () => (
  <>
    <NbhdAccordionItem header="Accordion Item">
      <NbhdText>
        This is the content of the accordion item. <a href="#">This is a link</a>.
      </NbhdText>
    </NbhdAccordionItem>
  </>
);

Usage

Use as a child within an Accordion. Each Accordion Item represents one expandable section and manages its own header, content, and expanded state.

Properties

Property	Attribute	Type	Default	Description
`expanded`	`expanded`	`boolean`	`false`	Controls whether the accordion item is expanded or collapsed.
`icon`	`icon`	`chevronplus-minus`	`chevron`	The icon type to display in the header.
`headingLevel`	`heading-level`	`123456`	`3`	Heading level wrapping the item header, so screen reader users can jump between sections by heading. Match it to the page outline.
`header`	`header`	`string`	—	The header text for the accordion item. Falls back to the header slot content when omitted.

Events

Name	Description	Event Detail
`nbhd-accordion-toggle`	Emitted when the header toggle is activated. The detail contains the next expanded state.	`{ expanded: boolean }`

Slots

Name	Description
`(default)`	The accordion panel content that is shown when the item is expanded.
`header`	Optional header content rendered in the toggle button. If omitted, the header property is used as the fallback text.

CSS Parts

Name	Description
`base`	The outer wrapper for the entire accordion item.
`heading`	The heading (role="heading") that wraps the header button.
`header`	The clickable header button that toggles the expanded state.
`panel`	The expandable region containing the accordion content.
`panel-content`	The inner wrapper around the slotted accordion content.

nbhd-accordion-item::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-accordion-item 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.

Accordion

Property	Token	Value
`--nbhd-accordion-item-header-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-accordion-item-header-focus-outlineOffset`	—	`-4px`
`--nbhd-accordion-item-header-fontSize`	`--nbhd-typography-subheading-fontSize`	`1.125rem`
`--nbhd-accordion-item-header-fontWeight`	`--nbhd-typography-subheading-fontWeight`	`700`
`--nbhd-accordion-item-header-inlineSize`	—	`100%`
`--nbhd-accordion-item-header-justifyContent`	—	`space-between`
`--nbhd-accordion-item-header-lineHeight`	`--nbhd-typography-subheading-lineHeight`	`1.3`
`--nbhd-accordion-item-header-paddingBlock`	`--nbhd-space-4`	`16px`
`--nbhd-accordion-item-header-paddingInline`	`--nbhd-space-4`	`16px`
`--nbhd-accordion-item-inlineSize`	—	`100%`
`--nbhd-accordion-item-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-accordion-item-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-accordion-item-panel-paddingBlock`	`--nbhd-space-4`	`16px`
`--nbhd-accordion-item-panel-paddingInline`	`--nbhd-space-4`	`16px`

Action plain

Property	Token	Value	Copy
`--nbhd-action-plain-color`	`--nbhd-color-action-plain-foreground`	`#1b5e20`

Dependencies

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

ButtonReady <nbhd-button>

Used by

AccordionDraft <nbhd-accordion>