# Variants (UI)

The **Variants** UI element allows to switch between objects contained within a [Variants tool](https://open-2v.gitbook.com/url/help.vectary.com/documentation/3d-configurator/variants). To use this feature, first, add a **Variants** tool to the project, then assign it as the source in the **Variants UI element** settings.

Object switching within **Variants** group can also be configured using the [Variants interaction](https://open-2v.gitbook.com/url/help.vectary.com/documentation/3d-configurator/interactions/actions/variants) for automated transitions.

#### Settings

Variants (UI) can be displayed in two styles:<br>

* **Dropdown** — a standard selection menu.

* **Swatch** — a visual selection with customizable thumbnails.

* **Auto-hide** — Hides the UI element when the object is hidden.

**Additional settings for Swatch style:**<br>

* **Display name** — Show the selected object name.
* **Alignment** — Set thumbnail alignment.
* **Spacing** — Define the spacing between thumbnails.
* **Swatch size** — Set the thumbnail size.
* **Swatches** — Upload a custom design for each variant.\
  \
  ![](https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2F8MDCqE4zpz4N3dr4jgvG%2Fimage.png?alt=media\&token=0cfc50af-c9bb-45f7-8950-b6ee293d0dd1)

#### Layout

* **W** — Defines the width of the **Variants** element.
* **H** — Defines the height of the **Variants** element.<br>
* **Fixed** — Sets a fixed size in pixels.
* **Fill** — Adjusts the size based on the parent element (**Floating UI** or **Container**).<br>
* **Padding** — Sets vertical and horizontal padding within the element.
* **Corner radius** — Defines the rounding radius for the dropdown field and swatches.<br>

#### Stroke

* **Thickness** — Defines the stroke thickness for the dropdown field.
* **Default color** — Sets the default stroke color (if disabled, the stroke will be transparent).
* **Hover color** — Changes the stroke color on hover.