Accordion

Guidelines
React API Reference
Blazor API Reference

Accordions organize content into collapsible sections, allowing users to expand and focus on what matters most while keeping interfaces clean and scannable.

Guidance

Aspect	Best Practice
Usage	Use accordions to group related content and reduce page clutter.
Content	Use clear, concise headings for each section. Avoid overloading sections with too much content.
Behavior	Only one section should be expanded at a time unless multiple expansion is enabled. Provide smooth transitions for expanding/collapsing.
States	Clearly indicate which sections are open or closed. Provide visual feedback for hover, focus, and disabled states.
Feedback	Use icons or arrows to show expand/collapse state. Animate transitions for a polished experience.
Examples	FAQs, settings panels, filter groups, or any scenario where content can be logically grouped and revealed on demand.

Best Practices

Clear Section Titles: Use descriptive, concise titles for each accordion item.
Consistent Behavior: Accordions should expand/collapse smoothly and predictably.
Appropriate Grouping: Only group related content. Avoid deeply nested accordions.
Accessible Controls: Ensure triggers are keyboard accessible and have appropriate ARIA attributes.
Logical Defaults: Expand the most relevant or first section by default if it helps users.

Do’s and Don’ts

Do

Use accordions to simplify complex layouts.
Provide clear visual cues for expanded/collapsed state.
Support keyboard navigation and screen readers.
Use for content that benefits from progressive disclosure.

Don't

Overuse accordions for all content—only use when it improves clarity.
Hide critical information behind collapsed sections.
Use ambiguous or generic section titles.
Rely solely on color to indicate state.

Additional Guidance

Psychological Impact:
- Progressive Disclosure: Accordions help users focus by revealing information as needed.
- Reduced Cognitive Load: By hiding less relevant content, accordions make interfaces less overwhelming.
- Control: Users feel empowered to explore content at their own pace.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from '@strongtie/design-system/accordion';

Usage

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>
      Section 1
    </AccordionTrigger>
    <AccordionContent>
      Content for section 1.
    </AccordionContent>
  </AccordionItem>
</Accordion>

`<Accordion>` Props

type

"single" | "multiple"

default:"\"single\""

The type of accordion. “single” allows only one item to be expanded at a time, while “multiple” allows multiple items to be expanded.

collapsible

boolean

default:"false"

If true, allows the user to collapse an expanded item.

value

string | string[]

The controlled value(s) of the item(s) to expand.

defaultValue

string | string[]

The value(s) of the item(s) to expand when initially rendered.

disabled

boolean

default:"false"

If true, the accordion will be disabled.

onValueChange

(value: string | string[]) => void

Callback function that is called when the expanded state changes.

`<AccordionItem>` Props

value

string

The value of the accordion item.

asChild

boolean

default:"false"

If true, the accordion item will render as a child component.

disabled

boolean

default:"false"

If true, the accordion item will be disabled.

Usage Examples

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2.</AccordionContent>
  </AccordionItem>
</Accordion>

Styling Classes

The following CSS classes are applied by the Accordion components:

accordion-item – Base class for each accordion item.
accordion-header – Wrapper for the trigger.
accordion-trigger – The clickable element that toggles the item.
accordion-icon – Icon indicating expand/collapse state.
accordion-content – Wrapper for the collapsible content.
accordion-content-inner – Inner wrapper for content.

For more examples, visit the Storybook.

Example

<StudsAccordion Multiple="true">
  <Items>
    <StudsAccordionItem Text="Orders" Icon="account_balance_wallet">
      Details for Orders
    </StudsAccordionItem>
    <StudsAccordionItem Text="Employees" Icon="account_box">
      Details for Employees
    </StudsAccordionItem>
    <StudsAccordionItem Text="Customers" Icon="accessibility">
      Details for Customers
    </StudsAccordionItem>
  </Items>
</StudsAccordion>

`<StudsAccordion>` Parameters

Multiple

bool

default:"false"

Gets or sets a value indicating whether multiple items can be expanded.

SelectedIndex

int

Gets or sets the index of the selected item.

OnSelectedIndexChanged

EventCallback<int>

Callback invoked when the selected index changes.

Expand

EventCallback<int>

Callback invoked when an item is expanded.

Collapse

EventCallback<int>

Callback invoked when an item is collapsed.

Items

RenderFragment

The items to be displayed in the accordion.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`<StudsAccordionItem>` Parameters

Accordion

StudsAccordion

The parent accordion.

ChildContent

RenderFragment

The content inside the accordion item.

CollapseAriaLabel

string

The aria-label for the collapse button.

CollapseTitle

string

The title for the collapse button.

Disabled

bool

default:"false"

Whether this item is disabled.

ExpandAriaLabel

string

The aria-label for the expand button.

ExpandTitle

string

The title for the expand button.

Icon

string

The icon for the item.

IconColor

string

The icon color.

Selected

bool

default:"false"

Whether this item is selected.

SelectedChanged

EventCallback<bool>

Callback invoked when the selected state changes.

Template

RenderFragment

The header content.

Text

string

The text for the item.

Visible

bool

default:"true"

Whether this item is visible.

Usage Examples

<StudsAccordion>
  <Items>
    <StudsAccordionItem Text="Section 1">
      Content for section 1.
    </StudsAccordionItem>
    <StudsAccordionItem Text="Section 2">
      Content for section 2.
    </StudsAccordionItem>
  </Items>
</StudsAccordion>

Styling Classes

The following CSS classes are applied by the Accordion components:

accordion – Root accordion container
accordion-item – Each accordion item
accordion-toggle-icon – The expand/collapse arrow icon
accordion-icon – The item’s icon

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<Accordion>` Props

`<AccordionItem>` Props

Usage Examples

Styling Classes

`<StudsAccordion>` Parameters

`<StudsAccordionItem>` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<Accordion> Props

​<AccordionItem> Props

​Usage Examples

​Styling Classes

​<StudsAccordion> Parameters

​<StudsAccordionItem> Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<Accordion>` Props

`<AccordionItem>` Props

Usage Examples

Styling Classes

`<StudsAccordion>` Parameters

`<StudsAccordionItem>` Parameters

Usage Examples

Styling Classes