> For the complete documentation index, see [llms.txt](https://knowledgebase.qommentary.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledgebase.qommentary.com/qommentary-form/custom-data/adding-input-columns/color-picker.md).

# Color picker

**Color picker** controls are visual cues which can be used as traffic light indicators to tag records with a meaningful color.

**Data type**: `string`

### Adding a Color picker control

1\. Edit your sheet\
2\. Click on the **Qommentary Form** extension\
3\. Expand **Input fields** section\
4\. Click on **Add input column**

![](/files/z1rle5StePC9sVJRwM61)

5\. Select **Color picker** from the dropdown menu

![](/files/bvF7NOtEKWNv4qUbusGI)

6\. Add a **label** to display in the form

![](/files/2adjTYqMRfceW0pQhm40)

7\. Add a **field** name

![](/files/0wfnMe3wHJ3fYDX7P69V)

{% hint style="danger" %}
If database is selected as data connection, then field name **must map** to destination table column name.
{% endhint %}

{% hint style="warning" %}
Field name cannot contain spaces.
{% endhint %}

8\. Click on **Done**

**Color picker** input column can now be updated and saved.

![](/files/idFdxF6ry0bK5jOUylYv)

### Adding color options

When you add a Color picker input column, you will be required to add color options.

To add a color option, please follow these steps:

1\. Edit your sheet\
2\. Click on the **Qommentary Form** extension\
3\. Expand the **Input fields** section and **Color picker** column\
4\. Click on **Add option**

![](/files/fZ8QqJSKaXndONpYGWN0)

5\. Give your color option a **Name**

<div align="left"><img src="/files/-MZB9bAFZFX960jZAvur" alt=""></div>

{% hint style="info" %}
Name will be saved in destination table. If no Tooltip text is provided, name will also be displayed in tooltip on color hover.
{% endhint %}

6\. Select a **Color**

<div align="left"><img src="/files/-MZBAE8btKyIQ56s7N3z" alt=""></div>

7\. Check **Show tooltip** if you wish to display a tooltip for this color

<div align="left"><img src="/files/-MZBAloC6PUKLRjK4SWR" alt=""></div>

{% hint style="info" %}
If you wish to hide tooltips for all colors, please see Disabling tooltips section.
{% endhint %}

8\. Alternatively, you may provide a custom **Tooltip text**

<div align="left"><img src="/files/-MZBBJWjDGTUG_wKk5tI" alt=""></div>

Once applied, tooltip is displayed on hover

![](/files/r02KmPtOuNAsp6SYUYE6)

{% hint style="info" %}
Tooltip text will override the text provided in the Name field.
{% endhint %}

### Disabling tooltips

If you wish to disable tooltips in your color picker control, please follow these steps:

1\. Edit your sheet\
2\. Click on the **Qommentary Form** extension\
3\. Expand the **Input fields** section and **Color picker** \
4\. Click on the switch control to disable tooltips

![](/files/YvV1B3ZKxkBtge3IR3u2)
