> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-create-a-combined-option-selector-+-input-component.md).

# Work in Progress: 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 %}

![](/files/Nx1uxUbQUkWbJjVsi9KE)

### Step 1: Create an Input Component

* Create a new Component type Input and check the **`multiline`** checkbox 

### Step 2: Create an Option Selector Component

* Create a new Component type Option Selector and check the **`allow multiple`** checkbox 

### 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
}
```