Accordion

A React component that expands and collapses content when its title is clicked, with height and opacity animations.

Installation

npm install @tevui/accordion

Usage

"use client";

import { Accordion } from "@tevui/accordion";

export default function Example() {
  return (
    <Accordion
      title="Details"
      id="details-accordion"
      showContent={false}
      onClick={(isOpen: boolean) => console.log("Open:", isOpen)}
    >
      <p>Accordion content.</p>
    </Accordion>
  );
}

Props

| Prop | Type | Default | Description | | --------------- | ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------- | | title | string | — | Required. Text of the button that expands and collapses the content. | | showContent | boolean | false | Required by the current type definition. Sets the initial expanded state. | | onClick | () => void or (isOpen: boolean) => void | — | Callback invoked on click, receiving the new expanded state. | | disabled | boolean | false | Disables the button and prevents toggling by clicking. | | children | React.ReactNode or React.ReactNode[] | — | Content displayed when expanded. | | id | string | "tevui-accordion" | Button identifier and prefix for content identifiers. Use a unique value for each instance. | | hasError | boolean | false | Applies the error color to the borders. | | showErrorIcon | boolean | false | Displays an icon beside the title: an error icon when hasError is true, or a check icon when it is false. |

Expanding and collapsing

The component manages the isShowContent state internally. Each button click toggles this state and calls onClick with the new value.

showContent is only used to initialize the state. Changing this prop after mounting does not update the component's expanded state.

Transitions from false to true and from true to false animate height and opacity over 250 ms, using the ease timing function. The height adapts to the content without a fixed limit.

The content remains mounted while collapsing and while collapsed, preserving the state of child components. When collapsed, it is hidden and receives inert, preventing focus and interaction. Animations are disabled when the user prefers reduced motion (prefers-reduced-motion: reduce).