Search Field
Search input with a leading magnifier icon and a trailing clear button, firing a debounced search event on input or immediately on Enter and clear.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | Current value of the search input. |
placeholder | string | — | Placeholder text; defaults to localized "Search". |
disabled | boolean | — | Disables the input and clear button. |
loading | boolean | — | Replaces the magnifier icon with a spinner to indicate a pending search. |
debounce | number | 250 | Debounce delay in milliseconds before the search event fires. |
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/search-field.js"></script>import "./pura/lib/search-field.js";