Accordion

An interactive section that toggles the visibility of its content.

An Accordion lets users toggle the visibility of content. The content section can be expanded to reveal details and collapsed to hide them, keeping information organized and saving space. It is commonly used in FAQs, settings panels, and documentation to present layered content efficiently.

Usage

import { Accordion } from '@workflowbuilder/ui';

function Example() {
  return (
    <Accordion label="What is @workflowbuilder/ui?" defaultOpen>
      Our component library, built on Base UI.
    </Accordion>
  );
}

Props

Also accepts every standard <div> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

childrenrequired

TypeReact.ReactNode

Contents of the collapsible section

labelrequired

Typestring

Text displayed in the header

defaultOpen

Typeboolean

Defaulttrue

Initial open state

icon

TypeReact.ReactNode

Icon the component shows; `IconSwitch` shows it in the off state.

isOpen

Typeboolean

True if not collapsed

onToggleOpen

Type(isOpen: boolean) => void

Callback run when the open state changes

CSS variables

This component does not expose its own CSS variables.