> From the [Strife developer docs](https://strife.app/docs/reference/fields/combo-box). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Combo Box

The Combo Box field lets you choose one or multiple values from a preset selection in a searchable drop-down. It stores these selections as an array of values in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-27%20at%2009.59.51.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Combo Box field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Placeholder</td><td>Display a placeholder text in the search field after opening the combo box</td><td></td></tr><tr><td>Icon</td><td>Displays an icon before the selected value in the combo box</td><td></td></tr><tr><td>Multi select</td><td>Enables multi-select, allowing users to choose multiple options</td><td></td></tr><tr><td>Options</td><td>Defines the choices presented in the drop-down. Each option is represented as an object containing a name, value, color hex value (optional), icon name (optional), and avatar url (optional)</td><td></td></tr><tr><td>Default Value</td><td>Default value to display when no value is selected</td><td></td></tr><tr><td>External source</td><td>Use an external source to fetch options. Use ${propertyName} to access the value of a property in the URL</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-combo-box`
* **Type:** `combo-box`
* Reference ID: `str-combo-box`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-combo-box",
    "type": "combo-box",
    "propertyName": "...",
    "attributes": {
      "placeholder": "...",
      "defaultValue": "...",
      "icon": "...",
      "multiSelect": true,     
      "externalDataSource": "..."     
    },
    "options": {
      "items": [
        {
          "name": "...",
          "value": "...",
          "color": "...",  //Optional, hex color format
          "icon": "...",   //Optional, name of icon
          "avatar": "..."  //Optional, url to avatar
        },
        ...
      ]
    }
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).