<le-string-input>

The idea behind having separate string, number, date, etc. inputs is to provide different views and controls for each type of data. At the end, internally, they all map to a common HTML input handling mechanism.

String input is targeted for single string textual data.

Usage

<le-string-input label="Present yourself" icon-start="🤷" placeholder="Username">
  <div slot="description">Hint: your email is not your username!</div>
  <div slot="icon-end">🏷️</div>
</le-string-input>

Properties

@value

The current value of the input. If omitted, then the input is empty.

<le-string-input value="Le-Kit"></le-string-input>

@name

If you want the input to be part of a form, you can use the name attribute.

@type

Defines the type of the input, which can affect the virtual keyboard on mobile devices and some built-in validation.

Possible values:

• text (default)
• email
• password
• search
• tel
• url

<le-string-input label="Password" type="password"></le-string-input>

@placeholder

Placeholder text for the input — text that is displayed inside the input when it is empty. Often it is used instead of the label, which is not helpful to the user, since it disappears when the user starts typing, but helps to save space, especially on mobile devices.

<le-string-input placeholder="Enter your username"></le-string-input>

@clearable

Whether the input can be cleared with a built-in clear button.

Warning: currently the button increases the width of the input, during the typing. Use it when the input has a fixed width (or bound container).

<le-string-input label="Free width" clearable></le-string-input>
<le-string-input label="Fixed width" clearable style="width: 300px;"></le-string-input>
<div style="width: 300px;">
  <le-string-input label="Within a container" clearable></le-string-input>
</div>

@readonly

Whether the input is read-only. The input can be selected and the value will be sent to the server when the form is submitted, but the user cannot modify the value.

<le-string-input label="Read-only input" value="Can't change me" readonly></le-string-input>

@disabled

Whether the input is disabled. The input will not be submitted with the form, and the user cannot interact with it.

<le-string-input label="Disabled input" value="Can't interact with me" disabled></le-string-input>

Properties or Slots

There are a few properties that can be set both as properties and as slots. This is important when you want to set another component inside the le-string-input, and here we're talking about icons, label, and descriptions. The thing is that when playing with frameworks sometimes it's easier to set them as properties, but when using the component in plain HTML, it's easier to set them as a slot. So you can choose the way that works best for you.

icon-start

An icon at the beginning of the input.

icon-end

An icon at the end of the input. Use it as a slot if you have to have, a dropdown with some other actions, for example.

label

A label for the input. Shown above the input field.

description

A description for the input. Shown below the input field. Use it as a slot if you have to set some link or other HTML content.

In the following example you can see how to use properties and slots, and even a small demo, how to use the other components to insert a popover at the end of the input.

<le-string-input
  label="With properties"
  icon-start="👤"
  icon-end="✅"
  description="This is a description"
></le-string-input>
<le-string-input>
  <div slot="label">With slots</div>
  <div slot="icon-start">👤</div>
  <div slot="icon-end">
    <le-popover placement="bottom" align="end" show-close="false">
      <le-button slot="trigger" variant="clear" size="small">
        <le-icon slot="icon-only" name="ellipsis-vertical"></le-icon>
      </le-button>
      <div style="width: 200px; text-align: start;">
        This is a popover content. You can put any content here, even another input.
      </div>
    </le-popover>
  </div>
  <div slot="description">This is a description</div>
</le-string-input>

Events

Uses custom event names. You can subscribe to these events using the standard event listener syntax. In some frameworks you will be able to subscribe to the changes via the on prefix: onLeChange, onLeInput, etc.

The format of the details data available in the event is as follows:

{
  value?: string;
  name?: string;
  externalId?: string;
}

leChange

Fires if the value of the input changes, every time the input loses its focus.

Type in something in the input and press Tab or click outside the input to trigger the event.

const input = document.getElementById("le-change-input");
input.addEventListener("leChange", (event) => {
  alert(`Change event details: ${event.detail}`);
});

leInput

Fires every time the value of the input changes. On every keystroke.

Example below will use the console as an example, since alerts would be too intrusive.

const input = document.getElementById("le-input");
input.addEventListener("leInput", (event) => {
  console.log(`Input event details: ${event.detail}`);
});