> 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**

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2Ffat9r1sCT4MHhobkvP7B%2Fimage.png?alt=media\&token=d5960bed-6a40-4b04-8773-751f92b0f4bd)

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

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2F9DM9mCZTs2727cQxUXxr%2Fimage.png?alt=media\&token=bc27b345-bb07-4b06-86f4-4da2b74ec7e5)

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

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2FJtlfvnCLzA7gKbknATqI%2Fimage.png?alt=media\&token=1a78834a-f0b1-471e-9410-3a5622e0fdf0)

7\. Add a **field** name

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2FrfJvwwC2Zjj2Ku1PcIwG%2Fimage.png?alt=media\&token=542df5bd-9805-4824-bc2b-67ce66fe45a1)

{% 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.

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2Fxf3wO7smsi1mOe2iPEaE%2Fimage.png?alt=media\&token=6f2c9ba9-6768-41f0-8d19-bc7b97ae2cb2)

### 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**

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2FXzwuQ1OJBE6hxyEDf3Lm%2Fimage.png?alt=media\&token=4a5213c1-7385-4326-b1a8-17dc8614726f)

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

<div align="left"><img src="https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZB9bAFZFX960jZAvur%2Fimage.png?alt=media&amp;token=52b43d26-093a-4d8e-93f4-c41c1da0d449" 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="https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBAE8btKyIQ56s7N3z%2Fimage.png?alt=media&amp;token=8a411fae-ff21-4bdb-bbac-f83692a6a453" alt=""></div>

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

<div align="left"><img src="https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBAloC6PUKLRjK4SWR%2Fimage.png?alt=media&amp;token=42a72f26-4030-4e90-ab77-dd96a4ce9b54" 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="https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBBJWjDGTUG_wKk5tI%2Fimage.png?alt=media&amp;token=c1c32a1d-8474-44a2-8c3a-a91cb56df211" alt=""></div>

Once applied, tooltip is displayed on hover

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2FopkFB5WM672ViHveMjgL%2Fimage.png?alt=media\&token=327f74b0-5a77-4383-a7fc-59fb0ef0f6a2)

{% 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

![](https://3028830514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUSRPWcyYI4YAL7ad9DIS%2Fuploads%2FHTKZ8QuUrF6zaodojsjx%2Fimage.png?alt=media\&token=d85b9e04-32ae-4b1d-b5de-455fa2ba6fbd)
