This package has moved and is now available at @dile/dile-input. Please update your dependencies. This repository is no longer maintained.

Input text field Web Component, with customized design. Based on LitElement.

<dile-input label="The label" placeholder="Write something..."></dile-input>

npm install dile-input

<script src="./node_modules/dile-input/dile-input.js" type="module"></script>

import 'dile-input/dile-input';

<dile-input
  name="input_name"
  label="Text to the label"
  value="Text to the input"
  placeholder="Some text"
  disabled
  errored
></dile-input>

• name: the name of the input element. This is usefull to distinguish the related element in an input event listener.
• label: the element label
• value: defines the text inside the input element
• placeholder: Defines the texts present in the input element when is empty
• disabled: on true, the element is disabled
• errored: on true, the element is marked as error
• disabeAutocomplete: on true, the input autocomplete HTML featured is disabled

You will need to configure Webpack, or some similar tool, as usual in your frontend workflow. But, if you prefer, simply run the "polymer serve" command from your project folder.

1. Install the Polymer CLI:

npm i -g polymer-cli

2. Run the development server and open a browser pointing to its URL:

polymer serve

This element acts as an native input element. So, you can listen the native input event.

inputField.addEventListener('input', (e) => {
  console.log('input event named ', e.target.name, ' has value: ', e.target.value);
});

The enter-pressed event is dispatched when the user press enter on it.

inputField.addEventListener('enter-pressed', (e) => {
  console.log('enter-pressed event, value: ', e.target.value);
});