{
  "title": "Collapsible",
  "description": "Single open/close disclosure with an animated content area.",
  "url": "/docs/components/collapsible",
  "since": "0.8.0",
  "tags": [
    "disclosure"
  ],
  "platform": "both",
  "source": "---\ntitle: Collapsible\ndescription: Single open/close disclosure with an animated content area.\nsince: 0.8.0\ntags: [disclosure]\nplatform: both\ncategory: disclosure\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Collapsible\" />\n\n## At a glance\n\n- Single-item disclosure — for multi-item FAQ lists use `Accordion`.\n- Compound API: `Collapsible.Trigger` + `Collapsible.Content`.\n- Trigger wires `aria-expanded` and `aria-controls` automatically.\n- Web: `Content` animates via CSS `max-height` transition (200 ms).\n- Native: `Content` mounts/unmounts immediately (animated height is a v2 follow-up).\n\n## Preview\n\n<Preview name=\"collapsible-basic\" />\n\n## Usage\n\n```tsx\nimport { Collapsible } from '@nori-ui/core';\n\n// Uncontrolled (starts closed)\n<Collapsible>\n  <Collapsible.Trigger>Show details</Collapsible.Trigger>\n  <Collapsible.Content>\n    <Text>Hidden until the trigger is pressed.</Text>\n  </Collapsible.Content>\n</Collapsible>\n\n// Uncontrolled (starts open)\n<Collapsible defaultOpen>\n  <Collapsible.Trigger>Hide details</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>\n\n// Controlled\n<Collapsible open={open} onOpenChange={setOpen}>\n  <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n  <Collapsible.Content>...</Collapsible.Content>\n</Collapsible>\n```\n\n## Props\n\n### `Collapsible`\n\nAccepts `open` (controlled) and `onOpenChange` for parent-driven state.\nUse `defaultOpen={true}` for uncontrolled mode starting in the open position.\n\n<PropsTable component=\"Collapsible\" />\n\n### `Collapsible.Trigger`\n\nThe button that toggles the panel. Accepts `children` (the visible label/icon)\nand an optional `asChild` to render a custom element instead of the default\n`Pressable`. Wires `aria-expanded` and `aria-controls` onto the trigger element\nautomatically.\n\n### `Collapsible.Content`\n\nThe panel that expands and collapses. Accepts `children` (the revealed content)\nand an optional `className` for layout styles. On web the panel animates via a\nCSS `max-height` transition (200 ms). On native, the panel mounts/unmounts\nwithout animation in v1 — animated height is a v2 follow-up.\n"
}