Last modified: August 22, 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>
    </>
  );
};
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.