Search code examples
material-designpolymer-1.0paper-elements

paper-input - float label on clicking the input field

paper-input floats its label only when the user types in the first character. Is it possible to float the label as soon as the user clicks on it? For example, refer https://unacademy.in/ login screen input fields.

Solution

  • You can use always-float-label, no-label-float properties/attributes of paper-input In an on-click event to achieve this. paper-input demo shows how to use always-float-label, no-label-float properties/attributes.

    A demo could be

    <!DOCTYPE html>
<html>

<head>

    <title>Label float</title>

    <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
  <link rel="import" href="paper-input/paper-input.html">
    

</head>

<body>

<my-form></my-form>  
  <dom-module id="my-form">  
   <template> 
  
     <paper-input name="name" id="name" label="name" on-click="_click" on-blur="_blur"></paper-input>
  
    </template> 
    <script type="text/javascript">
      Polymer({
        is:"my-form",
        _click:function (){
          //console.log(this.$.name.value);
          this.$.name.alwaysFloatLabel=true;
        },
        _blur:function(){
         this.$.name.alwaysFloatLabel=false;
       }
      })
    
    </script>
</dom-module>
</body>

</html>