---

title: IdentifierResults

---

# IdentifierResults

Paints the list of identifier results stored in the state. Each identifier result should be
represented by a IdentifierResult component besides any
other component.

## Props

| Name                          | Description                                                              | Type                       | Default           |
| ----------------------------- | ------------------------------------------------------------------------ | -------------------------- | ----------------- |
| <code>animation</code>        | Animation component that will be used to animate the identifier results. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Number of identifier results to render.                                  | <code>number</code>        | <code></code>     |

## Slots

| Name                 | Description                                | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Identifier results item content |                                           |

## Examples

A IdentifierResult **must** be used inside the IdentifierResults component. In the example below the
BaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult
component.

### Play with slot

```vue
<template>
  <IdentifierResults :animation="animation">
    <template #default="{ identifierResult }">
      <BaseResultLink :result="identifierResult">
        <template #default="{ result }">
          <IdentifierResult :result="result" />
        </template>
      </BaseResultLink>
    </template>
  </IdentifierResults>
</template>

<script setup>
import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
import BaseResultLink from "@empathyco/x-components/js/components/base-result-link.vue";
import FadeAndSlide from "@empathyco/x-components/js/animations/fade-and-slide.vue";

const animation = FadeAndSlide;
</script>
```

### Play with props

In this example, the identifier results have been limited to render a maximum of 3 items.

```vue
<template>
  <IdentifierResults :max-items-to-render="3">
    <template #default="{ identifierResult }">
      <IdentifierResult :result="identifierResult" />
    </template>
  </IdentifierResults>
</template>

<script setup>
import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
</script>
```