React

Import the Accordion and AccordionItem components from @tmedxp/react-components.

Properties

AccordionProperties extends PropsWithChildren<ComponentProps<'div'>>, meaning it includes all standard HTML attributes that can be applied to a <div>.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion.	✅
children	React.ReactElement<typeof AccordionItem> | React.ReactElement<typeof AccordionItem>[]	Set of accordion items.	❌
hasDivider	boolean	Display or not a divider. Displayed by default.	✅

AccordionItem properties

AccordionItemProperties extends PropsWithChildren<ComponentProps<'details'>>, meaning it includes all standard HTML attributes that can be applied to a <details>.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion.	✅
title	string	The accordion title.	❌
iconName	IconProperties['name']	The accordion icon name.	✅
children	React.ReactElement	The accordion content.	❌
open	boolean	HTML property. Defines the initial accordion state.	✅

Example

import { Accordion, AccordionItem } from '@tmedxp/react-components';

const ExampleAccordion = (items) => {
  return (
    <Accordion id="accordion-simple">
      {items.map((item, key) => (
        <AccordionItem
          key={key}
          title={item.title}
          name={item.name}
          open={item.open}
          hasDivider={item.hasDivider}
          iconName={item.iconName}
        >
          <div dangerouslySetInnerHTML={{ __html: item.HTMLContent }} />
        </AccordionItem>
      ))}
    </Accordion>
  );
};

export { ExampleAccordion };