Source

Command Palette

Search for a command to run...

Accordion

Accordion - Collapsible component that displays multiple panels while showing one or more at a time The Accordion is a vertically stacked list of items that can be expanded and collapsed. It supports two modes: single (only one panel open at a time) and multiple (multiple panels open simultaneously). Use accordions to organize content in expandable sections, allowing users to focus on one piece of information at a time while keeping the rest accessible.

About Accordion

Accordion - Collapsible component that displays multiple panels while showing one or more at a time The Accordion is a vertically stacked list of items that can be expanded and collapsed. It supports two modes: single (only one panel open at a time) and multiple (multiple panels open simultaneously). Use accordions to organize content in expandable sections, allowing users to focus on one piece of information at a time while keeping the rest accessible.

Installation

Import the Accordion component from LSD:
import { Accordion } from '@nipsys/lsd'

export default function MyComponent() {
  return <Accordion />
}

Variants

Component variants for different visual styles and use cases.
Multiple
Multiple panels can be expanded simultaneously

Single
Only one panel can be expanded at a time

Usage

Different usage modes provide flexibility for various use cases.
Single Mode
Use type="single" when you want to enforce that only one section is visible at a time. Add the collapsible prop to allow users to close all sections. Ideal for FAQ-style content where showing multiple answers would be overwhelming. This mode provides a clean, focused experience by preventing information overload.
Multiple Mode
Use type="multiple" when users should be able to open multiple sections simultaneously. Useful for reference materials or comparison content where users may want to compare information side by side. This mode provides maximum flexibility for users who need to reference multiple sections at once.

API Reference

All available props for the component.
type
Selection behavior - 'single' allows only one item open, 'multiple' allows multiple - single: Only one panel can be open at a time - multiple: Multiple panels can be open simultaneously
Type: "single" | "multiple"Selection behavior - 'single' allows only one item open, 'multiple' allows multiple - single: Only one panel can be open at a time - multiple: Multiple panels can be open simultaneously
collapsible
Allow closing all items when type is 'single' When true, users can click an open panel to close it, leaving no panels open When false, at least one panel must remain open at all times
Type: booleanAllow closing all items when type is 'single' When true, users can click an open panel to close it, leaving no panels open When false, at least one panel must remain open at all times
value
Value of the open item(s) for controlled components For type='single': string (the value of the open item) For type='multiple': string[] (array of open item values)
Type: string | string[]Value of the open item(s) for controlled components For type='single': string (the value of the open item) For type='multiple': string[] (array of open item values)
defaultValue
Default value of the open item(s) for uncontrolled components For type='single': string (the value of the open item) For type='multiple': string[] (array of open item values)
Type: string | string[]Default value of the open item(s) for uncontrolled components For type='single': string (the value of the open item) For type='multiple': string[] (array of open item values)
orientation
Orientation of the accordion - vertical: Items are stacked vertically (default) - horizontal: Items are arranged horizontally
Type: "vertical" | "horizontal"Orientation of the accordion - vertical: Items are stacked vertically (default) - horizontal: Items are arranged horizontally
disabled
Disable the accordion When true, all accordion triggers are disabled and cannot be interacted with
Type: booleanDisable the accordion When true, all accordion triggers are disabled and cannot be interacted with
onValueChange
Callback function called when the active panel changes
Type: (value: string | string[]) => voidCallback function called when the active panel changes

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through accordion triggers• Enter or Space - Toggle the currently focused panel• ArrowDown - Move focus to the next trigger when orientation is vertical• ArrowUp - Move focus to the previous trigger when orientation is vertical• ArrowRight - Move focus to the next trigger when orientation is horizontal• ArrowLeft - Move focus to the previous trigger when orientation is horizontal• Home - Move focus to the first trigger• End - Move focus to the last trigger• Shift + Tab - Navigate to the previous focusable element
ARIA Attributes
Proper ARIA attributes for screen readers
• role="region" is added to AccordionContent for screen readers• aria-expanded is managed on AccordionTrigger to indicate open/closed state• aria-controls links AccordionTrigger to AccordionContent• aria-level indicates nested accordion depth• aria-hidden properly manages visibility for collapsed panels
Focus States
Visible focus indicators for keyboard users
• Focus is automatically managed when panels open/close • Proper focus restoration when closing panels • Focus can be moved between triggers using arrow keys • Focus rings visible on all interactive elements
Alert