UI Components

Accordion

Accordion component displays collapsible content sections, allowing users to expand and collapse information as needed. It helps organize content efficiently, reducing visual clutter while keeping detailed information accessible. Based on Radix UI for full accessibility and keyboard navigation support.

Basic Usage

Simple accordion with a single collapsible item. Click the header to expand or collapse the content.

Multiple Items

Accordion with multiple items. Only one item can be open at a time (single mode).

Multiple Items - Multiple Mode

Accordion in multiple mode allows several items to be open simultaneously.

States

Accordion items have two visual states: closed (default) and open. The border color changes when an item is expanded.

Closed State

Default state with gray border (#E9EBED), 1px width. Height: 56px (fixed).

Open State

Expanded state with blue border (#343498), 0.5px width. Height: auto (adjusts to content).

This content is visible when the accordion is expanded. The border color changes to indicate the open state, and the chevron icon rotates 180 degrees.

Styling Details

Accordion follows precise design specifications from the design system.

Container

  • Padding: 12px vertical, 16px horizontal (py-3 px-4)
  • Gap between elements: 16px
  • Border radius: 8px (rounded-lg)
  • Border: 1px solid #E9EBED (closed), 0.5px solid #343498 (open)
  • Height: 56px fixed (closed), auto (open)

Title

  • Font: Inter, 18px, Medium (500 weight)
  • Line height: 1.5 (150%)
  • Color: #0D161F (gray-900)

Content

  • Font: Inter, 16px, Regular (400 weight)
  • Line height: 1.5 (150%)
  • Color: #798591 (gray-600)
  • Padding top: 8px
  • Border top: 1px solid #E9EBED (separator)

Icon Button

  • Size: 32x32px (size-8)
  • Variant: Secondary
  • Icon: ChevronDown, 18px
  • Rotation: 180 degrees when open
  • Transition: 300ms ease-in-out

Usage Examples

Common use cases for the Accordion component.

FAQ Section

Settings Panel

Product Features

Accessibility

The Accordion component is built on Radix UI primitives, ensuring full accessibility support.

  • ✓ Keyboard navigation: Arrow keys to navigate between items, Enter/Space to toggle
  • ✓ ARIA attributes: Proper roles, states, and properties for screen readers
  • ✓ Focus management: Visible focus indicators and logical tab order
  • ✓ Screen reader support: Announces expanded/collapsed state
  • ✓ Semantic HTML: Uses proper heading hierarchy and landmarks

Usage Guidelines

  • ✓ Use accordions to organize related content that can be hidden or shown
  • ✓ Use single mode when only one section should be open at a time
  • ✓ Use multiple mode when users might need to compare multiple sections
  • ✓ Keep titles concise and descriptive
  • ✓ Ensure content is scannable and well-structured
  • ✗ Don't use accordions for critical information that should always be visible
  • ✗ Don't nest accordions inside other accordions
  • ✗ Don't use accordions for navigation (use proper navigation components instead)