NOCTA UI

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

Install the Alert component using the nocta-ui CLI:

Terminal
npx nocta-ui add accordion

Then import the components you need:

Import
import { 
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from './accordion';

Examples

Basic

A simple accordion with collapsible content sections.

Nocta UI is a modern React component library built with performance and accessibility in mind.
You can install components using our CLI: npx nocta-ui add accordion
Yes! All components in Nocta UI have full dark mode support with automatic switching.

Card Variant

Use the card variant for a more elevated appearance with individual cards for each item.

Manage your profile, change email address and password.
Enable two-factor authentication and manage your login sessions.
Customize the interface theme, language, and notification settings.

Multiple Open

Allow multiple accordion items to be open simultaneously by setting type="multiple".

Learn the fundamentals of React - components, props, state and lifecycle.
How to use TypeScript with React for better type safety.
Writing unit and integration tests for React components.

Sizes

The accordion comes in three sizes: sm, md (default), and lg.

Short answer in small size.
Standard answer in default size.
More detailed answer in larger size, which can contain more content and details requiring additional space.

Controlled

Control the accordion state externally using the value and onValueChange props.

This accordion is controlled externally. You can open and close it programmatically.
The state of this accordion is managed by the parent component.

API Reference

Accordion

PropTypeDefaultDescription
type'single' | 'multiple''single'Whether one or multiple items can be open at the same time
variant'default' | 'card''default'The visual variant of the accordion
size'sm' | 'md' | 'lg''md'Size of the accordion
defaultValuestring | string[]undefinedDefault open items (uncontrolled)
valuestring | string[]undefinedOpen items (controlled)
onValueChange(value: string | string[]) => voidundefinedCallback when open items change
classNamestring''Additional CSS classes

AccordionItem

PropTypeDefaultDescription
valuestring-Unique identifier for the item
disabledbooleanfalseWhether the item is disabled
classNamestring''Additional CSS classes

AccordionTrigger

PropTypeDefaultDescription
classNamestring''Additional CSS classes

AccordionContent

PropTypeDefaultDescription
classNamestring''Additional CSS classes

Accessibility

The Accordion component follows WAI-ARIA guidelines:

  • Keyboard Navigation: Use Tab to navigate between triggers, Space or Enter to toggle items
  • Focus Management: Focus is properly managed when items are toggled
  • Screen Reader Support: Proper ARIA attributes for state and relationships
  • High Contrast: Works with high contrast mode and respects user preferences