@gavant/ember-floating-labels

Animated floating placeholder form labels for Ember apps.

Demo: https://gavant.github.io/ember-floating-labels/

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install @gavant/ember-floating-labels

To use the addon styles, you must use SASS:

ember install ember-cli-sass

(Upon addon installation, an import statement will be added to your app.scss)

Usage

An example <FlInput> usage, with all available arguments specified. Only @value and @placeholder are required, and you may pass in normal HTML attributes as well which will be applied to the <input> element (e.g. type="email", or disabled={{true}}, class="some-custom-input-class" etc).

@inset={{true}} enables an alternate styling, where the floating label will remain constrained inside of the input element, instead of overlaid on its top border.

<FlInput
    @value={{string}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>

{{! block form is supported too }}
<FlInput @value={{this.someValue}} @placeholder='Block input'>
    <Input @value={{this.someValue}} placeholder='Look ma, block content!' />
</FlInput>

NOTE: When using block form, make sure to still pass in a @value, so the label knows when to remain "floated".

There are also floating label components for <select> & <textarea> fields:

<FlSelect
    @options={{array<object>}}
    @value={{string}}
    @valuePath={{string}}
    @labelPath={{string}}
    @emptyOptionText={{string}}
    @allowClear={{boolean}}
    @onChange={{function}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>

<FlTextarea
    @value={{string}}
    @placeholder={{string}}
    @containerClass={{string}}
    @inputBaseClass={{string}}
    @inset={{boolean}}
/>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.