# I face PlaceHolder problem

**URL:** <https://discuss.emberjs.com/t/i-face-placeholder-problem/20566>\
**Category:** Uncategorized\
**Created:** [July 2, 2024, 9:24pm UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566 "2024-07-02T21:24:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gowtham](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gowtham/32/18374_2.png) [@Gowtham](https://discuss.emberjs.com/u/Gowtham)\
**Post date:** [July 2, 2024, 9:24pm UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566/1 "2024-07-02T21:24:50Z")

</div>

=\>my template login.hbs {{page-title “Login”}}

 {{outlet}} =\>my controller login.js import Controller from '@ember/controller'; export default class LoginController extends Controller { inputBoxes=["UserName","password"]; }

Here i have used a Component called form.hbs which is below

{{#each @inputBoxes as |inputbox|}} {{inputbox}}:{{input type="text" placeholder=inputbox}}  
{{/each}} {{@button}}

I tried to use value attribute which works fine perfectly inserted into my input box But Placeholder attribute is not working.

---

<div class="post-metadata">

**Author:** ![Gowtham](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gowtham/32/18374_2.png) [@Gowtham](https://discuss.emberjs.com/u/Gowtham)\
**Post date:** [July 2, 2024, 9:50pm UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566/2 "2024-07-02T21:50:01Z")

</div>

I find one Solution

instead of {{input}} helper i used ‘\< input \>’

{{#each @inputBoxes as |inputbox|}}

{{inputbox}}:\< input type=“text” class=“inputBox” autocomplete=“on” placeholder=inputbox autofocus=“autofocus”\>  
{{/each}}

it worked but now i want to KNOW how it work with ‘\< input\>’ but not with {{input}}🤦‍♂️

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [July 5, 2024, 2:25am UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566/3 "2024-07-05T02:25:15Z")

</div>

What version of Ember are you using? In any version past ~3.12 you should use `<Input …>` (notice the capital “I”). This is Ember’s wrapped input component. You can also do what you did and use the native html input tag. Rendering with curlies e.g. `{{input …}}` is deprecated and is not recommended anymore. It might not even work in newer Ember versions but I’m not 100% on that.

---

<div class="post-metadata">

**Author:** ![Gowtham](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gowtham/32/18374_2.png) [@Gowtham](https://discuss.emberjs.com/u/Gowtham)\
**Post date:** [July 7, 2024, 7:38pm UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566/4 "2024-07-07T19:38:30Z")

</div>

Thanks @dknutsen for your reply. I am using Ember 5.9. \<Input …\> component is working fine but {{input …}} isn’t.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [July 8, 2024, 6:49pm UTC](https://discuss.emberjs.com/t/i-face-placeholder-problem/20566/5 "2024-07-08T18:49:41Z")

</div>

That’s great that you are using a modern version of Ember. In that case you should absolutely not use curly component invocation (e.g. the `{{input ...}}` version. Even if it’s still supported at all in 5.9 it is old style and has been deprecated for a long time. But it doesn’t sound like it is working properly anyway.

So as a general rule of thumb:

NEVER use curly syntax:

```auto
{{input
  id="input-name"
  disabled=this.isReadOnly
  maxlength="50"
  value=this.value
}}

```

ALWAYS use either `<Input ... >` or native `<input ... >`

```hbs
{{! Ember's Input component which wraps native input }}
<Input
  id="input-name"
  disabled={{this.isReadOnly}}
  maxlength="50"
  @value={{this.value}}
/>

{{! native input }}
<input
  id="input-name"
  disabled={{this.isReadOnly}}
  maxlength="50"
  @value={{this.value}}
  {{on "input" this.setValue}}
/>

```

The primary difference between the two being that Ember’s Input component is two-way bound, meaning that it will always update the bound value for you. The native version is one-way bound so you manually manage the bound value. I generally prefer the native version but if you don’t want or need that level of control then the Ember component version is just fine.