# How to create a combined Option Selector + Input component

{% hint style="warning" %}
**Note: This page only applies to the Old Rendering Engine** - for the New Rendering engine ask a Savvy Expert for help
{% endhint %}

{% hint style="info" %}
This special custom component will allow us to fill an Input with options selected from an Option Selector without losing the capacity of typing freely.
{% endhint %}

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MhQDj1515ZbGiAosrJG%2F-MhQFubSNBNgLCyJbgkg%2Fimage.png?alt=media\&token=e75e908c-c5a7-4809-a53a-70466e2375e1)

### Step 1: Create an Input Component

* Create a new Component type Input and check the **`multiline`** checkbox&#x20;

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MhQG56CsmISn5dWFT8J%2F-MhQHOpJMSIaFzYyKL_L%2Fimage.png?alt=media\&token=61f8dff7-1dca-4ca0-b587-aa34e95f1a4e)

### Step 2: Create an Option Selector Component

* Create a new Component type Option Selector and check the **`allow multiple`** checkbox&#x20;

###

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MhQG56CsmISn5dWFT8J%2F-MhQHoIB78vvklDfDMqJ%2Fimage.png?alt=media\&token=41128264-ca90-4eaf-848d-2ae72350bb89)

### Step 3: Create the computed field

```
function result({
  input,
  option_selector,
  _display_values,
}, { setUserData }) {

  if (!option_selector) return null

  input = (input ? (input + ", ") : "")
    + _display_values.option_selector

  setUserData('input', input)
  setUserData('option_selector', null)

  return result
}
```

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-MhQJLRags_tiDtyCLm_%2F-MhQJO8VPO9RsPeAd1QX%2Fchrome-capture%20\(1\).gif?alt=media\&token=34b5f889-b77f-44a6-b06a-0085d247b426)
