Usage

Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenChange), and uncontrolled (self-managed with defaultIsOpen). Used internally by Collapsible.

import { useCollapsible } from '@astryx-vue/core/Collapsible'

Call it in setup() and read isOpen / isEnabled, or bind isOpen to v-show. The hook only owns state; the trigger markup stays yours.

<script setup lang="ts">
import { useCollapsible } from '@astryx-vue/core/Collapsible'

const { isOpen, toggle } = useCollapsible({ isCollapsible: true })
</script>

<template>
  <button type="button" :aria-expanded="isOpen" @click="toggle">
    Details
  </button>
  <div v-show="isOpen">
    Hidden while collapsed.
  </div>
</template>

Pass an object to isCollapsible for controlled state. isOpen is the model ref, usually v-model:isOpen:

const isOpen = ref<boolean | undefined>(false)
const collapsible = useCollapsible({
  isCollapsible: { isOpen, onOpenChange: (next) => { isOpen.value = next } },
})

Best practices

Guidance	Practices
Do	Use the hook directly when building custom collapsible components that need Astryx collapsible behavior without the Collapsible wrapper.
Do	For accordion behavior, wrap items in CollapsibleGroup and pass unique value props.
Don't	Pass local isOpen, defaultIsOpen, or onOpenChange expecting them to run for a value-bound group item; the group owns that state and notification path.
Don't	Implement your own open/close state when useCollapsible already provides it; the hook handles group coordination automatically.

Examples

Custom disclosure UI built directly with useCollapsible for headless open/close state.

useCollapsible — Custom Disclosure

Review docs, run visual checks, and confirm keyboard behavior before shipping the component update.

isEnabled: true · isOpen: true

Custom disclosure UI built directly with useCollapsible for headless open/close state.