---
title: li-color
description: "Text input with color picker."
---
## Supported Features

| Feature | Supported |
| ------- | :-------: |
| Document | ✔ |
| Media | ✔ |
| Include | ✔ |
| Document Creation Flow | ✔ |
| Push Message | ✔ |
| Usage Log | ✗ |
| Table Dashboard | ✗ |
| Display Filter | ✗ |
| Search Indexing | ✔ |
| System Metadata | ✗ |
| Planning System | ✗ |
| Webhook Conditions | ✔ |

## Description

li-color will provide you with 2 settings (based on `useInputTypeColor`)
* `useInputTypeColor: true` - color picker which stores the HEX color code
* `useInputTypeColor: false` - text field where you have to enter the HEX color code (e.g. `#8CBA51`)


## Default UI

Text input with color picker.

![image](../images/li-color-ui.png)

## Storage Format

```js
<String>
```

## Content Type Config

```js
{
  handle: 'myContentType',
  // ...
  metadata: [
    {
      handle: 'myHandle',
      type: 'li-color',
      config: {
        // common
        hideFromForm: false,                     // optional, default: false
        required: true,                          // optional, default: false
        requiredErrorMessage: 'Provide a value', // optional
        index: true,                             // optional, default: false. Added in release-2023-07
        // specific
        translatable: true                       // optional, default: false, translations are only supported for data-record and mediaLibrary
      },
      ui: {
        label: 'My Label',
        config: {
          useInputTypeColor: false,              // optional, default: true, shows a color picker
          readOnly: true,                        // optional, default: false
          placeholder: 'foo',                    // optional, takes camelized name otherwise
        }
      }
    }
    // ...
  ]
}
```