Input
`<pura-input>` is a native web component that renders a text field with an optional label and hint text. Use it in forms to collect text, email, password, or any type supported by the HTML input. It reflects the typed value back to the host's `value` attribute and fires an `input` event on every keystroke.
Preview
<pura-input
label="Email"
type="email"
placeholder="you@example.com"
hint="We never share your email."
></pura-input>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text shown above the field. |
hint | string | — | Hint text shown below the field. |
placeholder | string | — | Example text shown when the field is empty. |
type | string | text | HTML input type (text, email, password, etc). |
value | string | — | Current value of the field; also available as the .value property. |
disabled | boolean | false | Disables the field when present. |
invalid | boolean | false | Applies the error style and sets aria-invalid when present. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/input.js"></script>import "./pura/lib/input.js";