# elements.create()

> Creates an element for one product.

Source: https://docs.tryyoursize.com/reference/web/elements-create/

*Method* · `@tryyoursize/sdk`

Creates an element for one product. Mount it with `mount()`.

```ts
create(type: ElementType, options: ElementOptions): TysElement;
```

## Parameters

- **`type`** (`"fit" | "button" | "sizeGuide"`, required): `"sizeGuide"`: a link-sized "Size guide" with the TryYourSize mark, for the spot next to your size picker. `"button"`: a compact "Find my size" button. `"fit"`: the inline element, with sign-in and "your body is ready" in your page.
- **`options`** (`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).

## Returns

`TysElement`: The element. Several of the same type are allowed (for example a product grid).

## Errors

`TryYourSizeError` with code `invalid_option` (missing `product`, bad `variant`, `label` or `demo`) or `unknown_element_type`.

## Examples

### Size guide next to the size picker

**JavaScript**

```js
const guide = tys.elements().create("sizeGuide", {
  product: "SKU-123",
  variant: "link",          // or "button"
  label: "Find your size",   // optional; otherwise localized
});
guide.mount("#size-guide");
```

**React**

```tsx
<SizeGuide product="SKU-123" variant="link" label="Find your size" />
```

**HTML**

```html
<tys-size-guide publishable-key="pk_test_…" product="SKU-123" variant="link" label="Find your size"></tys-size-guide>
```

### Demo mode (test keys only)

**JavaScript**

```js
const demo = tys.elements().create("fit", {
  product: "CREW-TSHIRT",
  demo: { body: "sample-female-165", height: 640 },
});
demo.mount("#demo");
```

**React**

```tsx
<FitElement product="CREW-TSHIRT" demo={{ body: "sample-female-165", height: 640 }} />
```

**HTML**

```html
<tys-fit publishable-key="pk_test_…" product="CREW-TSHIRT" demo-body="sample-female-165"></tys-fit>
```

## See also

- [Size guide quickstart](https://docs.tryyoursize.com/quickstarts/size-guide.md)