Repository files navigation

An input element that sends its value to a server endpoint and renders the response body.

$ npm install @github/remote-input-element

import'@github/remote-input-element'

<!-- Filter a list of items from the server --><remote-inputsrc="/query"aria-owns="results"><input></remote-input><ulid="results"></ul>

A GET request will be sent to/query?q=${input.value}.

The parameter name (q) is customizable with the[param] attribute:

<!-- Live preview of Markdown --><remote-inputsrc="/preview"aria-owns="md-preview"param="body"><textarea></textarea></remote-input><divid="md-preview"></div>

A boolean[loading] attribute is added to<remote-input> when a network request begins and removed when it ends.

.loading-icon {display: none; }remote-input[loading] .loading-icon {display: inline; }

• loadstart - The server fetch has started.
• load - The network request completed successfully.
• error - The network request failed.
• loadend - The network request has completed.
• remote-input-success – Received a successful response (status code 200-299), and response HTML has been set. Bubbles.
• remote-input-error – Received a not successful response. Bubbles.

Browsers without nativecustom element support require apolyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

npm installnpm test

Distributed under the MIT license. See LICENSE for details.