xref: /aosp_15_r20/external/chromium-trace/catapult/third_party/polymer/components/paper-input/README.md (revision 1fa4b3da657c0e9ad43c0220bacf9731820715a5) 
1[![Build status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-input)
2[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/paper-input)
3
4## <paper-input>
5
6Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
7
8`<paper-input>` is a single-line text field with Material Design styling.
9
10<!---
11```
12<custom-element-demo>
13  <template>
14    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
15    <link rel="import" href="paper-input.html">
16    <link rel="import" href="../iron-icons/iron-icons.html">
17    <style>
18      paper-input {
19        max-width: 400px;
20        margin: auto;
21      }
22      iron-icon, div[suffix] {
23        color: hsl(0, 0%, 50%);
24        margin-right: 12px;
25      }
26    </style>
27    <next-code-block></next-code-block>
28  </template>
29</custom-element-demo>
30```
31-->
32```html
33<paper-input always-float-label label="Floating label"></paper-input>
34<paper-input label="username">
35  <iron-icon icon="mail" prefix></iron-icon>
36  <div suffix>@email.com</div>
37</paper-input>
38```
39