Sassy labels

Sassy (floating) labels – No javascript, just some good ol' css!

Installation

Install via npm/yarn

$ npm i sassy-labels --save-dev
# or ... 
$ yarn add sassy-labels --dev

Usage

Import via Sass/SCSS

// where you handle sass imports (e.g app.sass)
@import "~sassy-labels"

Input

<div class="sassy-labels">
    <input type="text" placeholder="Text input">
    <label>Label text</label>
</div>

Textarea

<div class="sassy-labels">
    <textarea placeholder="Textarea"></textarea>
    <label>Label text</label>
</div>

Browser Support

Sassy labels is depending on the :placeholder-shown pseudo-class which is compatible with recent versions of:

• Chrome
• Safari
• Firefox
• Opera

According to caniuse this feature is NOT supported at all in IE11 / Edge. 💩

Credits

• Robbin Johansson

License

Sassy labels is an open-sourced software licensed under the MIT license.