# How to pass options to a field in code

**URL:** <https://discourse.getcockpit.com/t/how-to-pass-options-to-a-field-in-code/1692>\
**Category:** Support\
**Created:** [October 28, 2020, 4:49pm UTC](https://discourse.getcockpit.com/t/how-to-pass-options-to-a-field-in-code/1692 "2020-10-28T16:49:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kasperkamperman](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/kasperkamperman/32/688_2.png) [@kasperkamperman](https://discourse.getcockpit.com/u/kasperkamperman)\
**Post date:** [October 28, 2020, 4:49pm UTC](https://discourse.getcockpit.com/t/how-to-pass-options-to-a-field-in-code/1692/1 "2020-10-28T16:49:49Z")

</div>

I’m working on a custom component and I use existing fields. (based on date-range object)  
However, I can’t seem to pass options.

The height stays the default height of 300px and it doesn’t change to 600.

If I add an object field to a collection I can give it a height of 600 (height is part of the options), but I can’t do this within the code.

What I tried inline:  
`<field-object opts="{ 'height':'600px' }"></field-object>`

And putting the json in ascript  
` <field-object opts="{ test }"></field-object>`

```
<script>
var $this = this;

this.test = {"height": "600px"}
</script>

```

Here the whole code:

> <https://gist.github.com/kasperkamperman/8bdff5b3beee002ae733aae066f27629>

@raffaelj Do you have an idea?

---

<div class="post-metadata">

**Author:** ![kasperkamperman](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/kasperkamperman/32/688_2.png) [@kasperkamperman](https://discourse.getcockpit.com/u/kasperkamperman)\
**Post date:** [October 28, 2020, 8:19pm UTC](https://discourse.getcockpit.com/t/how-to-pass-options-to-a-field-in-code/1692/2 "2020-10-28T20:19:18Z")

</div>

I found the solution. I had to use cp-field with a field type in order to make use of the options it seems.

Option 1:

```auto
<cp-fieldcontainer>
     <cp-field type="object" opts="{ { 'height': '600px' } }" bind="value.bla"></cp-field>
</cp-fieldcontainer>

```

Option 2:

```auto
<script>
    var $this = this;

    this.test = { 
      'height': '600px'
    };       
</script>

<cp-fieldcontainer>
  <cp-field type="object" opts="{ test }" bind="value.bla"></cp-field>
</cp-fieldcontainer>

```