---

title: ResultVariantSelector

---

# ResultVariantSelector

Component to show and select the available variants of a product for a given nest level.
TODO: Log warning on mount when result is not injected.

## Props

| Name               | Description                                    | Type                | Default        |
| ------------------ | ---------------------------------------------- | ------------------- | -------------- |
| <code>level</code> | The nest level of the variants to be rendered. | <code>number</code> | <code>0</code> |

## Slots

| Name                         | Description     | Bindings<br />(name - type - description)                             |
| ---------------------------- | --------------- | --------------------------------------------------------------------- |
| <code>variant</code>         | Variant item    | **variant** <code>ResultVariant</code> - The variant item<br /><br /> |
| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />       |

## Events

This component does not emit any events.

## Examples

### Basic usage

This component must be used as a child of `ResultVariantsProvider`.

Also, this component is intended to be used overwriting the content with the slots.

By default it will render a list of buttons containing the available variants.

This component only has a required `level` prop, that indicates the level of the variants to be
rendered.

```vue
<template>
  <ResultVariantsProvider :result="result">
    <p>Result name: {{ result.name }}</p>

    <h1>Select color</h1>
    <ResultVariantSelector :level="0" />

    <h1>Select size</h1>
    <ResultVariantSelector :level="1" />
  </ResultVariantsProvider>
</template>

<script setup>
import {
  ResultVariantsProvider,
  ResultVariantSelector,
} from "@empathyco/x-components";
const result = {
  id: "jacket",
  modelName: "Result",
  type: "Product",
  isWishlisted: false,
  identifier: { value: "jacket" },
  images: [],
  name: "jacket",
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: "/products/jacket",
  variants: [
    {
      name: "red",
      variants: [{ name: "red XL" }, { name: "red L" }],
    },
    {
      name: "blue",
      variants: [{ name: "blue S" }, { name: "blue M" }, { name: "blue L" }],
    },
  ],
};
</script>
```

### Play with the default slot

You can customize the list using the default slot:

```vue
<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector
      :level="0"
      #default="{ variants, selectedVariant, selectVariant }"
    >
      <div>
        <p v-if="selectedVariant">
          Selected variant: {{ selectedVariant.name }}
        </p>
        <ul class="x-flex">
          <li v-for="(variant, index) in variants" :key="index">
            <button @click="selectVariant(variant)">{{ variant.name }}</button>
          </li>
        </ul>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>

<script setup>
import {
  ResultVariantsProvider,
  ResultVariantSelector,
} from "@empathyco/x-components";
const result = {
  id: "jacket",
  modelName: "Result",
  type: "Product",
  isWishlisted: false,
  identifier: { value: "jacket" },
  images: [],
  name: "jacket",
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: "/products/jacket",
  variants: [{ name: "red" }, { name: "blue" }],
};
</script>
```

### Play with variant-slot

You can customize the variant item using the `variant` slot:

```vue
<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector
      :level="0"
      #variant="{ variant, isSelected, selectVariant }"
    >
      <div>
        <button @click="selectVariant">
          {{ variant.name }}
          <span v-if="isSelected">SELECTED!</span>
        </button>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>

<script setup>
import {
  ResultVariantsProvider,
  ResultVariantSelector,
} from "@empathyco/x-components";
const result = {
  id: "jacket",
  modelName: "Result",
  type: "Product",
  isWishlisted: false,
  identifier: { value: "jacket" },
  images: [],
  name: "jacket",
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: "/products/jacket",
  variants: [{ name: "red" }, { name: "blue" }],
};
</script>
```

### Play with variant-content slot

You can customize the content of the default variant button using the `variant-content` slot:

```vue
<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector #variant-content="{ variant, isSelected }">
      <div>
        {{ variant.name }}
        <span v-if="isSelected">SELECTED!</span>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>

<script setup>
import {
  ResultVariantsProvider,
  ResultVariantSelector,
} from "@empathyco/x-components";
const result = {
  id: "jacket",
  modelName: "Result",
  type: "Product",
  isWishlisted: false,
  identifier: { value: "jacket" },
  images: [],
  name: "jacket",
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: "/products/jacket",
  variants: [{ name: "red" }, { name: "blue" }],
};
</script>
```