Package Exports

@lion/input
@lion/input/lion-input.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lion/input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Input

🛠 Status: Pilot Phase
Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)

not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

lion-input component is a webcomponent that enhances the functionality of the native <input> element.

Features

based on field
extra visual elements can be added via slots
- label: can also be provided via the label attribute, but the slot can be used to change the html and CSS of the label. For example add an sr-only class to the label to make it visually hidden. A label is always needed for accessibility reasons.
- help-text: a helper text shown below the label to give extra clarification.
- prefix: does not have an active use case yet, but the option is in place.
- suffix: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
- before: does not have an active use case yet, but the option is in place.
- after: can be used to show a currency or percentage.
delegates attributes like type, disabled and read-only to the native input
can make us of validate

How to use

Installation

npm i --save @lion/input

import '@lion/input/lion-input.js';

// validator import example
import { maxLengthValidator } from '@lion/validate';

Example

<lion-input
  label="My label"
  name="myName"
  .modelValue="${foo}"
  .errorValidators="${[['required'], maxLengthValidator(20)]}"
></lion-input>

Making use of slots:

<lion-input name="amount">
  <label slot="label">Amount</label>
  <div slot="help-text">Extra information</div>
  <div slot="after">EUR</div>
</lion-input>