# "recommendation" event

> The shopper's recommended size for this product, in your size labels: on mount when the shopper is already connected, and on every change.

Source: https://docs.tryyoursize.com/reference/web/event-recommendation/

*Event* · `@tryyoursize/sdk`

The shopper's recommended size for this product, in your size labels: on mount when the shopper is already connected, and on every change. Sizes only, never measurements.

The size guide element always listens; for other elements, adding a handler starts it. Preselect your picker, but never override a size the shopper picked themselves.

```ts
recommendation: Recommendation;
```

## Payload

- **`product`** (`string`, required)
- **`status`** (`RecommendationStatus`, required): `ready`, `computing`, `none`, `signed_out` or `unavailable`. See [tys.recommendation()](https://docs.tryyoursize.com/reference/web/client-recommendation.md).
- **`size`** (`string | null`, required): The recommended size in the store's own label (its size map), or null.
- **`studioSize`** (`string | null`, required): The same size as entered in TryYourSize Studio, or null.
- **`wearableSizes`** (`string[]`, optional): Sizes that can be worn on this body, in the store's labels (when simulated).

## Example

**JavaScript**

```js
let touched = false;
sizePicker.addEventListener("change", () => (touched = true));
guide.on("recommendation", (r) => {
  if (r.status === "ready" && !touched) sizePicker.value = r.size;
});
```

**React**

```tsx
<SizeGuide
  product="SKU-123"
  onRecommendation={(r) => {
    if (r.status === "ready" && !touched) setSize(r.size);
  }}
/>
```

**HTML**

```html
el.addEventListener("tys:recommendation", (e) => {
  if (e.detail.status === "ready" && !touched) sizePicker.value = e.detail.size;
});
```

## See also

- [Preselect the recommended size](https://docs.tryyoursize.com/guides/recommendation-event.md)