paper-input

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.0.1/paper-input/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-input.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
  <iron-icon icon="mail" slot="prefix"></iron-icon>
  <div slot="suffix">@vaadin.com</div>
</paper-input>

CSS

paper-input {
    max-width: 400px;
    margin: auto;
  }
  
  iron-icon,
  div[suffix] {
    color: hsl(0, 0%, 50%);
    margin-right: 12px;
  }