---
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: 2025-07
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/latest/components/variantselector
  md: https://shopify.dev/docs/api/hydrogen/latest/components/variantselector.md
---

# Variant​Selectorcomponent

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/2025-07/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/2025-07/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>
  ```

```ts
{
  name: string;
  value?: string;
  values: 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, {recurseIntoArrays: true}>
  ```

```ts
{
  value: string;
  isAvailable: boolean;
  to: string;
  search: string;
  isActive: boolean;
  variant?: PartialDeep<ProductVariant, {recurseIntoArrays: true}>;
  optionValue: PartialProductOptionValues;
}
```

### PartialProductOptionValues

```ts
any
```

### PartialProductOption



```ts
PartialDeep<
  Omit<ProductOption, 'optionValues'> & {
    optionValues: Array<PartialProductOptionValues>;
  }
>
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  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 'react-router';

  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/utilities/getselectedproductoptions)