lion/packages/input

Input

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>