For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/collapse.md.
Leaf UI
  • English

      • Collapse

      Expand or collapse a group of sections.

      Basic usage

      Expand freely

      About Leaf Garden.

      Accordion · Compact
      basic.tsx
      import type { CollapseItem } from '@ifhover/leaf-ui';

import { Collapse, Flex, Input, Space, Text } from '@ifhover/leaf-ui';

const items: CollapseItem[] = [
  { key: 'about', label: 'About the project', children: <p>About Leaf Garden.</p> },
  {
    key: 'settings',
    label: 'Settings',
    children: (
      <Flex direction="column" gap="sm" align="start">
        <Text>Project name</Text>
        <Input aria-label="Project name" placeholder="Type a draft, then collapse to keep it" />
      </Flex>
    ),
  },
  { key: 'archived', label: 'Archived', children: null, disabled: true },
];

export function CollapseBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Expand freely</Text>
        <Collapse items={items} defaultActiveKey="about" />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Accordion · Compact</Text>
        <Collapse items={items} accordion size="sm" />
      </Flex>
    </Space>
  );
}

      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 '@ifhover/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.