Accordion

An interactive UI component that lets users toggle the visibility of content. The content section can be expanded to reveal details and collapsed to hide them, keeping information organized and saving space. Commonly used in FAQs, settings panels, and documentation to present layered content efficiently.

function AccordionExample() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        width: '100%',
      }}
    >
      <Accordion label="Default Open Accordion" defaultOpen>
        <p>
          This accordion is open by default. Click the header to collapse it.
        </p>
      </Accordion>
      <Accordion label="Initially Closed Accordion" defaultOpen={false}>
        <p>This accordion starts closed. Click the header to expand it.</p>
      </Accordion>
      <Accordion label="Accordion with Rich Content" defaultOpen={false}>
        <div
          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
        >
          <p>Accordions can contain any content, including nested elements.</p>
          <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
          </ul>
        </div>
      </Accordion>
    </div>
  );
}

Props

label

required

Typestring

Text displayed in the header

children

required

TypeReactReactNode

Contents of the collapsible section

defaultOpen

Typeboolean

Defaulttrue

Initial open state

icon

TypeReactReactNode

Icon content React Node

isOpen

Typeboolean

True if not collapsed

onToggleOpen

Typesignature

Callback run when the open state changes