> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/selection-option-type/color-swatch-and-image-swatch.md).

# Color Swatch and Image Swatch

**Color Swatch** and **Image Swatch** are visually interactive option types that let customers select from a set of choices using **colors** or **images**, instead of traditional dropdowns or text.

***

<figure><img src="/files/Mge6pAewsvkhSsaVRbNv" alt=""><figcaption></figcaption></figure>

**🧩 How They Work:**

* Each value appears as a clickable color block or image.
* Customers can easily tap or click to choose their desired option.
* You can allow **single** or **multiple selections** depending on your configuration.

***

<figure><img src="/files/zmrKRlgOkEoVJGKqPyum" alt=""><figcaption></figcaption></figure>

#### ⚙️ General Settings:

For both elements, you can configure the following:

* **Label / Name**
* **Required Field** (force selection before proceeding)
* **Hidden Field**
* **Helptext**
* **Add-on Price** for specific selections
* **Allow Multiple Selection**
* **Default Value**
* **Conditional Logic**
* **Mix/Max selection**
* **Style: Veritial/Horizontal**
* **Out-of-Stock Style**: You can customize how out-of-stock options appear — *show, blur, strike through,* or *hide*.
* **Expand/collapse option values**

***

#### 🎨 Specific Features for Color Swatch:

* **Color Picker Integration**: You can define swatch colors using HEX codes.
* **Preview Functionality**: When linked with elements like Text Box, the selected color can be shown as a real-time preview.

***

#### 🖼️ Specific Features for Image Swatch:

* **Upload custom images to represent each option.**
* **Tooltip Style:**

<figure><img src="/files/VWqcN5CALtWU0OvEpprp" alt=""><figcaption></figcaption></figure>

***

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email [**contact@globo.io**](mailto:contact@globo.io)**.**

We’re always here and happy to help — with sincerity and care!