# useCompositeId

[Back to Composables README](https://github.com/NantHealth/featherk/blob/integration/packages/composables/README.md)

Creates SSR-safe, component-scoped DOM IDs using Vue's `useId()`. Use it for related trigger, popup, menu, and ARIA relationship IDs within one rendered component instance.

## Quick Start

1. Call `useCompositeId()` from component setup.
2. Use `instanceId` when one component-level DOM ID is needed.
3. Use `compose(...)` for related IDs with stable logical segments.

```ts
import { useCompositeId } from "@featherk/composables/id";

// Step 1: Vue creates a unique ID for this rendered component instance.
const ids = useCompositeId("action-cell");

// Step 2: use the component-level ID where a single DOM ID is needed.
const cellId = ids.instanceId;

// Step 3: compose related DOM and ARIA relationship IDs.
const triggerId = ids.compose("patient", "trigger");
const menuId = ids.compose("patient", "menu");
```

The default prefix is `fkid`, producing IDs like `fkid-v-0-patient-menu`. Pass a custom prefix when a component-specific DOM prefix improves inspection or debugging.

`useCompositeId` is for component-scoped DOM identifiers. Keep deterministic row/trigger IDs used with `useActiveIdRegistry` consumer-owned, for example `patient:42`.