---
title: VariantSelector
description: >-
  The `VariantSelector` component helps you build a form for selecting available
  variants of a product. It is important for variant selection state to be
  maintained in the URL, so that the user can navigate to a product and return
  back to the same variant selection. It is also important that the variant
  selection state is shareable via URL. The `VariantSelector` component provides
  a render prop that renders for each product option.
api_version: 2024-10
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2024-10/components/variantselector'
  md: 'https://shopify.dev/docs/api/hydrogen/2024-10/components/variantselector.md'
---

# Variant​Selector

The `VariantSelector` component helps you build a form for selecting available variants of a product. It is important for variant selection state to be maintained in the URL, so that the user can navigate to a product and return back to the same variant selection. It is also important that the variant selection state is shareable via URL. The `VariantSelector` component provides a render prop that renders for each product option.

## Props

* **children**

  **({ option }: { option: VariantOption; }) => ReactNode**

  **required**

* **handle**

  **string**

  **required**

  The product handle for all of the variants

* **options**

  **Array\<PartialProductOption> | undefined**

  **required**

  Product options from the [Storefront API](https://shopify.dev/docs/api/storefront/2024-10/objects/ProductOption). Make sure both `name` and `values` are a part of your query.

* **productPath**

  **string**

  By default all products are under /products. Use this prop to provide a custom path.

* **selectedVariant**

  **Maybe\<PartialDeep\<ProductVariant>>**

  An optional selected variant to use for the initial state if no URL parameters are set

* **variants**

  **| PartialDeep\<ProductVariantConnection> | Array\<PartialDeep\<ProductVariant>>**

  Product variants from the [Storefront API](https://shopify.dev/docs/api/storefront/2024-10/objects/ProductVariant). You only need to pass this prop if you want to show product availability. If a product option combination is not found within `variants`, it is assumed to be available. Make sure to include `availableForSale` and `selectedOptions.name` and `selectedOptions.value`.

* **waitForNavigation**

  **boolean**

  Should the VariantSelector wait to update until after the browser navigates to a variant.

### VariantOption

* name

  ```ts
  string
  ```

* value

  ```ts
  string
  ```

* values

  ```ts
  Array<VariantOptionValue>
  ```

### VariantOptionValue

* isActive

  ```ts
  boolean
  ```

* isAvailable

  ```ts
  boolean
  ```

* optionValue

  ```ts
  PartialProductOptionValues
  ```

* search

  ```ts
  string
  ```

* to

  ```ts
  string
  ```

* value

  ```ts
  string
  ```

* variant

  ```ts
  PartialDeep<ProductVariant>
  ```

### PartialProductOptionValues

```ts
any
```

### PartialProductOption



Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {VariantSelector} from '@shopify/hydrogen';
  import {Link} from '@remix-run/react';

  const ProductForm = ({product}) => {
    return (
      <VariantSelector
        handle={product.handle}
        options={product.options}
        variants={product.variants}
      >
        {({option}) => (
          <>
            <div>{option.name}</div>
            <div>
              {option.values.map(
                ({value, isAvailable, to, isActive, variant}) => (
                  <Link
                    to={to}
                    prefetch="intent"
                    className={
                      isActive ? 'active' : isAvailable ? '' : 'opacity-80'
                    }
                  >
                    {value}
                    <br />
                    {variant && `SKU: ${variant.sku}`}
                  </Link>
                ),
              )}
            </div>
          </>
        )}
      </VariantSelector>
    );
  };
  ```

  ##### TypeScript

  ```tsx
  import {VariantSelector} from '@shopify/hydrogen';
  import type {Product} from '@shopify/hydrogen/storefront-api-types';
  import {Link} from '@remix-run/react';

  const ProductForm = ({product}: {product: Product}) => {
    return (
      <VariantSelector
        handle={product.handle}
        options={product.options}
        variants={product.variants}
      >
        {({option}) => (
          <>
            <div>{option.name}</div>
            <div>
              {option.values.map(
                ({value, isAvailable, to, isActive, variant}) => (
                  <Link
                    to={to}
                    prefetch="intent"
                    className={
                      isActive ? 'active' : isAvailable ? '' : 'opacity-80'
                    }
                  >
                    {value}
                    <br />
                    {variant && `SKU: ${variant.sku}`}
                  </Link>
                ),
              )}
            </div>
          </>
        )}
      </VariantSelector>
    );
  };
  ```

## Related

[- getSelectedProductOptions](https://shopify.dev/docs/api/hydrogen/2024-10/utilities/getselectedproductoptions)