mate-code / animated-label-form
Animated floating labels for Bootstrap forms
Installs: 65
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Language:CSS
Type:component
This package is not auto-updated.
Last update: 2025-04-13 07:40:04 UTC
README
This library will create placeholder labels with a floating effect, depending on the form field being filled or blank.
Support
- Both text inputs and select fieds
- Select2 support
- Optimized for Bootstrap Forms
- Supports Yii2 forms - make sure to configure as described below!
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require mate-code/animated-label-form
or add
"mate-code/animated-label-form": "~1.0"
to the require section of your composer.json file.
Usage
Add inside your <head> tag
<link href="/path/to/animated-label-form.css" rel="stylesheet"> <script src="/path/to/jQuery.js"></script> <script src="/path/to/animated-label-form.js"></script>
And build your form like this:
<form class="animated-label"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1"> <label for="exampleInputEmail1">Email address</label> </div> <!-- other form fields --> </form>
Make sure you place the <label> AFTER the input field
Yii2 Usage
The usage in Yii2 does not change instead of the begin method of your form:
<?php use yii\bootstrap\ActiveForm; $form = ActiveForm::begin([ "options" => ["class" => "animated-label"], "fieldConfig" => ["template" => "{input}\n{label}\n{hint}\n{error}"], ]); ?>