---
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: 2023-10
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-10/components/variantselector'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-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

* **handle**

  **string**

  **required**

  The product handle for all of the variants

* **options**

  **PartialObjectDeep\<ProductOption, {}>\[]**

  **required**

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

* **children**

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

  **required**

* **variants**

  **PartialObjectDeep\<ProductVariantConnection, {}> | PartialObjectDeep\<ProductVariant, {}>\[]**

  Product variants from the [Storefront API](https://shopify.dev/docs/api/storefront/2023-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`.

* **productPath**

  **string**

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

### VariantOption

* name

  ```ts
  string
  ```

* value

  ```ts
  string
  ```

* values

  ```ts
  Array<VariantOptionValue>
  ```

### VariantOptionValue

* value

  ```ts
  string
  ```

* isAvailable

  ```ts
  boolean
  ```

* to

  ```ts
  string
  ```

* search

  ```ts
  string
  ```

* isActive

  ```ts
  boolean
  ```

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, path, isActive}) => (
                <Link
                  to={path}
                  prefetch="intent"
                  className={
                    isActive ? 'active' : isAvailable ? '' : 'opacity-80'
                  }
                >
                  {value}
                </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}) => (
                <Link
                  to={to}
                  prefetch="intent"
                  className={
                    isActive ? 'active' : isAvailable ? '' : 'opacity-80'
                  }
                >
                  {value}
                </Link>
              ))}
            </div>
          </>
        )}
      </VariantSelector>
    );
  };
  ```

## Related

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