or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdhooks.mdindex.md
tile.json

index.mddocs/

Chakra UI Accordion

Chakra UI Accordion is a React component library that provides accessible, vertically stacked interactive content sections with expandable/collapsible functionality. Built following WAI-ARIA practices, it offers comprehensive keyboard navigation support and seamless integration with the Chakra UI design system.

Package Information

  • Package Name: @chakra-ui/accordion
  • Package Type: npm
  • Language: TypeScript/React
  • Installation: npm install @chakra-ui/accordion

Core Imports

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/accordion";

For hook-based and advanced usage:

import {
  useAccordion,
  useAccordionItem,
  useAccordionContext,
  useAccordionItemState,
  useAccordionStyles,
  AccordionProvider,
} from "@chakra-ui/accordion";

Basic Usage

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/accordion";

function BasicAccordion() {
  return (
    <Accordion>
      <AccordionItem>
        <h2>
          <AccordionButton>
            <div style={{ flex: 1, textAlign: "left" }}>
              Section 1 title
            </div>
            <AccordionIcon />
          </AccordionButton>
        </h2>
        <AccordionPanel>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </AccordionPanel>
      </AccordionItem>

      <AccordionItem>
        <h2>
          <AccordionButton>
            <div style={{ flex: 1, textAlign: "left" }}>
              Section 2 title
            </div>
            <AccordionIcon />
          </AccordionButton>
        </h2>
        <AccordionPanel>
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Architecture

The accordion system is built around several key components:

  • Accordion: Root wrapper providing context and focus management
  • AccordionItem: Individual accordion sections with state management
  • AccordionButton: Interactive triggers for expanding/collapsing items
  • AccordionPanel: Content areas with smooth collapse animations
  • AccordionIcon: Visual indicators showing expand/collapse state
  • Hooks: Lower-level hooks for custom implementations and state access

Capabilities

Core Components

Primary React components for building accordion interfaces with full accessibility support and Chakra UI integration.

declare const Accordion: React.ForwardRefExoticComponent<
  AccordionProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionItem: React.ForwardRefExoticComponent<
  AccordionItemProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionButton: React.ForwardRefExoticComponent<
  AccordionButtonProps & React.RefAttributes<HTMLButtonElement>
>;

declare const AccordionPanel: React.ForwardRefExoticComponent<
  AccordionPanelProps & React.RefAttributes<HTMLDivElement>
>;

declare const AccordionIcon: React.FC<AccordionIconProps>;

Core Components

State Management Hooks

React hooks providing accordion state logic, item management, and context access for custom implementations.

declare function useAccordion(props: UseAccordionProps): UseAccordionReturn;

declare function useAccordionItem(props: UseAccordionItemProps): UseAccordionItemReturn;

declare function useAccordionContext(): AccordionContext;

declare function useAccordionItemState(): {
  isOpen: boolean;
  onClose: () => void;
  isDisabled: boolean;
  onOpen: () => void;
};

State Management

Core Types

interface AccordionProps extends UseAccordionProps, HTMLChakraProps<"div">, ThemingProps<"Accordion"> {
  /** If true, height animation and transitions will be disabled */
  reduceMotion?: boolean;
}

interface UseAccordionProps {
  /** If true, multiple accordion items can be expanded at once */
  allowMultiple?: boolean;
  /** If true, any expanded accordion item can be collapsed again */
  allowToggle?: boolean;
  /** The index(es) of the expanded accordion item */
  index?: ExpandedIndex;
  /** The initial index(es) of the expanded accordion item */
  defaultIndex?: ExpandedIndex;
  /** The callback invoked when accordion items are expanded or collapsed */
  onChange?(expandedIndex: ExpandedIndex): void;
}

/** @deprecated - Use number | number[] instead */
type ExpandedIndex = number | number[];

interface AccordionItemProps extends UseAccordionItemProps, HTMLChakraProps<"div"> {
  children?:
    | React.ReactNode
    | ((props: { isExpanded: boolean; isDisabled: boolean }) => React.ReactNode);
}

interface UseAccordionItemProps {
  /** If true, the accordion item will be disabled */
  isDisabled?: boolean;
  /** If true, the accordion item will be focusable */
  isFocusable?: boolean;
  /** A unique id for the accordion item */
  id?: string;
}

interface AccordionButtonProps extends HTMLChakraProps<"button"> {}

interface AccordionPanelProps extends HTMLChakraProps<"div"> {
  /** The properties passed to the underlying Collapse component */
  motionProps?: CollapseProps;
}

type AccordionIconProps = PropsOf<typeof Icon>;

type UseAccordionReturn = ReturnType<typeof useAccordion>;

type UseAccordionItemReturn = ReturnType<typeof useAccordionItem>;

// Chakra UI base types referenced in interfaces
interface HTMLChakraProps<T extends As> extends ChakraProps, HTMLAttributes<DOMElements[T]> {
  as?: T;
}

interface ThemingProps<ThemeComponent extends string = string> {
  variant?: string;
  size?: string;
  colorScheme?: string;
  orientation?: "horizontal" | "vertical";
  styleConfig?: SystemStyleObject;
}

interface CollapseProps {
  animateOpacity?: boolean;
  startingHeight?: number | string;
  endingHeight?: number | string;
  transition?: any;
}

type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;