Skip to main content
Last modified: November 18, 2025
The Accordion component renders an expandable and collapsable section that can contain other components. This component can be helpful for saving space and breaking up extension content.
ui-extensions-accordion-section
import { Accordion, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <>
      <Accordion title="Item One">
        <Text>
          Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and
          nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of
          the world.
        </Text>
      </Accordion>
      <Accordion title="Item Two">
        <Text>Second inner text</Text>
      </Accordion>
    </>
  );
};

Props

PropTypeDescription
titleStringThe accordion’s title text.
defaultOpenBooleanWhen set to true, the accordion will be open on initial page load. The open prop takes precedence over this prop.
disabledBooleanWhen set to true, the accordion’s state cannot be changed. Set to false by default.
openBooleanControls the accordion’s open state programmatically. When set to true, the accordion will open. Takes precedence over defaultOpen.
onClick() => voidA function that will be invoked with the accordion title is clicked. This function receives no arguments and its returned value is ignored.
size'xs', 'extra-small' | 'sm', 'small' | 'med', 'medium' (default)The size of the accordion title.