Accordion

Accordion allows users to show and hide sections of content.

Basic + All States Example

<Accordion>
  <Accordion.Item title="What is PDL-WebComponents?" defaultOpen>
    A specification-driven component library.
  </Accordion.Item>
  <Accordion.Item title="How do I use it?">
    Simply use the components directly in MDX.
  </Accordion.Item>
  <Accordion.Item title="Disabled Section" disabled>
    This section cannot be opened.
  </Accordion.Item>
</Accordion>

What is PDL-WebComponents?▼

A specification-driven component library.

How do I use it?▼

Disabled Section▼

Controlled Example

See the controlled usage pattern in the full documentation.

Props (Accordion.Item)

Prop	Type	Default	Description
title	string	—	Header text
defaultOpen	boolean	false	Initial state (uncontrolled)
isOpen	boolean	—	Controlled open state
onToggle	function	—	Toggle callback
disabled	boolean	false	Prevents interaction

Related Components

• Tabs — For switching between content panels