ember-float-label

Animated float labels for your Ember app.

Installation

# From within your ember-cli project
ember install:addon ember-float-label

Usage

In your template:

{{#float-label}}
  {{input type='text' value=name placeholder='Name'}}
{{/float-label}}

{{#float-label}}
  {{textarea value=notes placeholder='Notes'}}
{{/float-label}}

{{#float-label}}
  {{view 'select'
         prompt='State'
         content=stateOptions
         optionValuePath='content.abbreviation'
         optionLabelPath='content.name'
         value=state}}
{{/float-label}}

Note that input and textarea must have a placeholder while select must have a prompt. If you want the float label to be something different than the placeholder/prompt, you can specify it as follows:

{{#float-label label='Something Else'}}
  {{input type='text' value=name placeholder='Name'}}
{{/float-label}}

Styling is left completely up to you.