Leaf UI
  • English

      • Collapse

      Expand or collapse a group of sections.

      Basic usage

      Live previewBasic usage

      About Leaf Garden.

      basic.tsx
      import { Collapse, type CollapseItem, Input } from '@sudden3/leaf-ui';

const items: CollapseItem[] = [
  { key: 'about', label: 'About the project', children: <p>About Leaf Garden.</p> },
  {
    key: 'settings',
    label: 'Settings',
    children: (
      <Input aria-label="Project name" placeholder="Type a draft, then collapse to keep it" />
    ),
  },
  { key: 'archived', label: 'Archived', children: null, disabled: true },
];
export function CollapseBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Collapse items={items} defaultActiveKey="about" />
      <Collapse items={items} accordion size="sm" />
    </div>
  );
}

      Collapse API

      PropertyTypeDefaultDescription
      itemsreadonly CollapseItem[]RequiredPanel items
      activeKey / defaultActiveKeystring | readonly string[][]Controlled / initial expanded keys
      onChange(keys: string[]) => void—Expanded keys change
      accordionbooleanfalseExpand one panel at a time
      borderedbooleantrueShow border
      size'sm' | 'md' | 'lg''md'Header size
      destroyInactivebooleanfalseDestroy content when collapsed

      CollapseItem

      PropertyTypeDefaultDescription
      keystringRequiredUnique key
      label / childrenReactNodeRequiredHeader / panel content
      disabledbooleanfalseDisable this panel
      extraReactNode—Header actions

      Types

      Import the exported types when defining props or building item lists.

      import type { CollapseProps, CollapseItem } from '@sudden3/leaf-ui';

      Usage notes

      Visited content is retained by default. Arrow keys, Home and End move between headers; Enter or Space toggles a panel. Actions in extra do not toggle the panel.