Implementation:OpenHands OpenHands Accordion
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A collapsible content panel component that supports single or multi-expand modes via a compound component pattern.
Description
The Accordion component provides an expandable/collapsible content area built using a compound component pattern (Accordion.Item). It manages which panels are currently expanded through a controlled expandedKeys array, allowing the parent to maintain full control over the expansion state. The component supports both "single" mode (only one panel open at a time) and "multi" mode (multiple panels open simultaneously). The source file is 69 lines long and lives within the OpenHands UI component library.
Usage
Use the Accordion when you need to present multiple sections of content in a vertically stacked layout where users can expand and collapse individual sections. It is ideal for FAQ lists, settings panels, or any interface where screen real estate must be conserved while still providing access to detailed content.
Code Reference
Source Location
openhands-ui/components/accordion/Accordion.tsx (69 lines)
Signature
interface AccordionProps {
expandedKeys: string[];
type?: "multi" | "single";
setExpandedKeys(keys: string[]): void;
children: React.ReactNode;
}
Import
import { Accordion } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
expandedKeys |
string[] |
Yes | — | Array of keys identifying which accordion items are currently expanded. |
type |
"multi" | "single" |
No | "multi" |
Controls whether multiple items can be expanded simultaneously or only one at a time. |
setExpandedKeys |
(keys: string[]) => void |
Yes | — | Callback invoked when the set of expanded keys changes. |
Outputs
Renders a vertically stacked list of collapsible panels. Each Accordion.Item child renders a header and a content area that expands or collapses based on whether its key is present in expandedKeys.
Usage Examples
import { Accordion } from "@openhands/ui";
import { useState } from "react";
function FAQSection() {
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
return (
<Accordion
expandedKeys={expandedKeys}
setExpandedKeys={setExpandedKeys}
type="single"
>
<Accordion.Item key="q1" title="What is OpenHands?">
OpenHands is an open-source AI coding assistant platform.
</Accordion.Item>
<Accordion.Item key="q2" title="How do I get started?">
Install via npm and follow the quick-start guide.
</Accordion.Item>
</Accordion>
);
}