dile-input

Input text field Web Component, with customizable design.

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

Derived components

There are some components in this package based on the dile-input functionality with different behaviours.

• dile-input-integer: make transformations to the input in order to ensure the value is an integer
• dile-input-money: to use on money input (always float values with two decimals)
• dile-input-percentage: to place a "%" character besides the input and ensure the values are float

Install

npm install @dile/ui

Usage

Import the component.

import '@dile/ui/components/input/input';

Use the component

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

Properties

• name: the name of the input element. This is usefull to distinguish the related element in an input event listener.
• label: the element label
• type: the input type
• value: defines the text inside the input element
• placeholder: Defines the texts present in the input element when is empty
• disabled: when true, the element is disabled
• readonly: when true, is not editable
• errored: when true, the element is marked as error
• disableAutocomplete: when true, the input autocomplete HTML featured is disabled
• selectOnFocus: allways select the content of the input on focus
• message: optionaly, the input can display a message
• labelRight: text placed on the right side of the input
• hideErrorOnInput: when true, the errored state truns off when the user changes the input element and the message is cleared
• focusOnStart: when true, Set the application focus to this the input component after the initialization

Useful Methods

• focus(): focus the input element

Events

• input: 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);
});

• enter-pressed: 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);
});

• element-changed: The element-changed event is dispatched when value on the input changes. In the event detail will emmit the element name and valueproperties.

Styling

dile-input demos

Default input

<dile-input 
  name="name" 
  label="Name" 
  placeholder="Write your name"
></dile-input>

Focus functionality

<script type="module">
import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {
  
  render() {
    return html`
      <dile-input 
        id="address" 
        name="address" 
        label="Address" 
        disableAutocomplete 
        labelRight="..."
        message="This input has other properties..."
      ></dile-input>
      <button id="focus">Set focus on input</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('focus').addEventListener('click', () => {
      this.shadowRoot.getElementById('address').focus();
    });
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>

Errored input

<dile-input 
  name="name" 
  label="Name" 
  errored
  message="Errored message"
></dile-input>

Styled input

<style>
.styled {
  --dile-input-label-color: #6d3d6c;
  --dile-input-label-font-weight: bold;
  --dile-input-border-radius: 0;
  --dile-input-border-color: #6d3d6c;
  --dile-input-border-width: 2px;
  --dile-input-label-margin-bottom: 0.5rem;
  --dile-input-line-height: 2.5rem;
}
</style>
<dile-input class="styled" name="name" label="Name" placeholder="Write your name" disableAutocomplete></dile-input>