ib-input.hbs

<div class="form-group {{if hasError 'has-error'}}">
  {{#if hasBlock}}
    <label class='control-label infield-label'>{{yield}}</label>
  {{/if}}
  {{input type=type
          class='form-control'
          value=value
          focus-out=(action 'fieldTouched')}}
  {{#if hasError}}
    <div class='help-block'>{{errorMessage}}</div>
  {{/if}}
</div>

ib-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ib-input'],
  attributeBindings: ['data-id'],

  'data-id': Ember.computed.reads('fieldId'),

  // arguments
  value: null,

  // optional args
  type: 'text',
  errorMessage: null,

  visited: false, // we might need to reset this if reused by Glimmer

  hasError: Ember.computed.and('visited', 'errorMessage'),

  actions: {
    fieldTouched() {
      this.set('visited', true);
    }
  }
});