Accordion | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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" defaultOpen={true}> <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> </> ); };
Prop Type Description
title Required String The accordion's title text.
defaultOpen Boolean When set to true, the accordion will be open on initial page load. The open prop takes precedence over this prop.
disabled Boolean When set to true, the accordion's state cannot be changed. Set to false by default.
open Boolean Controls the accordion's open state programmatically. When set to true, the accordion will open. Takes precedence over defaultOpen.
onClick () => void A 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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.