abaabil

Getting Started

Interactive Components

Form Components

Data Display Components

Feedback Components

Layout & Navigation

Media Components

Details

Expandable content section

A flexible and accessible Details component that creates expandable and collapsible content sections, supporting various styles, icons, and keyboard interactions.

VersionLicenseDownloadsBundle Size (minified)Bundle Size (minified + gzip)

Overview

This documentation provides instructions on how to use the Details component in your React projects. The Details component is part of the abaabil.details library.

import Details from 'abaabil.details';

Key Features

  • Fully accessible with proper ARIA attributes and keyboard navigation
  • Customizable appearance with icon support for summary and expand/collapse states
  • Flexible content rendering
  • Controlled and uncontrolled usage supported

Basic Usage

The Details component can be used in your JSX to create expandable sections. You can customize the component by setting its properties such as summary, icon, openIcon, closeIcon, and more.

Custom Icons

You can customize the icons used in the Details component:

Initially Expanded

You can set the Details component to be initially expanded:

Properties

The Details component accepts the following properties:

summary

Type: ReactNode

Description: Content to display in the summary (header) of the Details component.

children

Type: ReactNode

Description: Content to display when the Details component is expanded.

icon

Type: string

Description: Icon ID to display before the summary content.

openIcon

Type: string

Description: Icon ID to display when the Details component is expanded.

Default: 'chevron-down'

closeIcon

Type: string

Description: Icon ID to display when the Details component is collapsed.

Default: 'chevron-up'

detailsClassName

Type: string

Description: Additional CSS classes to apply to the outer details element.

summaryClassName

Type: string

Description: Additional CSS classes to apply to the summary element.

contentClassName

Type: string

Description: Additional CSS classes to apply to the content container.

expanded

Type: boolean

Description: Controls the initial expanded state of the Details component.

Default: false

Accessibility

The Details component is designed with accessibility in mind:

  • Uses semantic HTML5 <details> and <summary> elements
  • Implements proper ARIA attributes for expandable content
  • Supports full keyboard navigation
  • Provides visual feedback for hover and focus states

Keyboard Interactions

The Details component supports the following keyboard interactions:

  • Enter, Space: Toggle the expanded state
  • ArrowDown, ArrowRight: Expand the Details component
  • ArrowUp, ArrowLeft: Collapse the Details component

Styling

The Details component uses Tailwind CSS classes for styling:

  • Customizable outer container appearance through detailsClassName prop
  • Summary (header) styling with summaryClassName prop
  • Content area styling with contentClassName prop
  • Default styles provide a cohesive look with other Abaabil components

Best Practices

Recommendations for effectively using the Details component:

  • Use clear and concise summary text
  • Group related content within a single Details component
  • Consider using icons to enhance visual recognition
  • Avoid nesting Details components too deeply

Browser Support

The Details component is compatible with modern browsers that support the HTML5 <details> element:

  • Chrome 12+
  • Firefox 49+
  • Safari 6+
  • Edge 79+
  • Opera 15+