# VariantSelector

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.

```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>
  );
};

```

```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>
  );
};

```

## Props

### VariantSelectorProps

### handle

value: `string`

The product handle for all of the variants

### options

value: `PartialObjectDeep<ProductOption, {}>[]`

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

### variants

value: `PartialObjectDeep<ProductVariantConnection, {}> | PartialObjectDeep<ProductVariant, {}>[]`

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

value: `string`

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

### children

value: `({ option }: { option: VariantOption; }) => ReactNode`

  - VariantOption: {
  name: string;
  value?: string;
  values: Array<VariantOptionValue>;
}

### VariantOption

### name

value: `string`


### value

value: `string`


### values

value: `Array<VariantOptionValue>`

  - VariantOption: {
  name: string;
  value?: string;
  values: Array<VariantOptionValue>;
}
  - VariantOptionValue: {
  value: string;
  isAvailable: boolean;
  to: string;
  search: string;
  isActive: boolean;
}

### VariantOptionValue

### value

value: `string`


### isAvailable

value: `boolean`


### to

value: `string`


### search

value: `string`


### isActive

value: `boolean`


## Related

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