# element.update()

> Changes the element's options in place.

Source: https://docs.tryyoursize.com/reference/web/element-update/

*Method* · `@tryyoursize/sdk`

Changes the element's options in place. A new `product` (or demo body) reloads the element; `variant` and `label` restyle it.

```ts
update(options: Partial<ElementOptions>): void;
```

## Parameters

- **`options`** (`Partial<ElementOptions>`, required)
  - **`product`** (`string`, required): Your product ID or SKU, as synced to TryYourSize.
  - **`variant`** (`"link" | "button"`, optional): "sizeGuide" only: a text link (default, like most stores' "Size guide") or an outlined button.
  - **`label`** (`string`, optional): "sizeGuide" only: your own words for "Size guide" (otherwise localized from `locale`).
  - **`demo`** (`DemoOptions`, optional): `"fit"` only, test keys only: demo mode. The element shows the garment on a named sample body (synthetic size-chart tape values, never a real person's), with no sign-in: size chips, objective numbers in cm and kPa, a turning body and a sample-body picker. For landing pages and sales demos.
    - **`body`** (`string`, required): A sample body id: `sample-female-158`, `sample-female-165`, `sample-female-172`, `sample-male-172`, `sample-male-178` or `sample-male-186`.
    - **`height`** (`number`, optional): Height of the element in px (default 640).

## Examples

### A variant page that switches product

**JavaScript**

```js
colorSelect.addEventListener("change", () => guide.update({ product: colorSelect.value }));
```

**React**

```tsx
// Changing the prop calls update() for you:
<SizeGuide product={selectedSku} />
```