0463ec6494
- @lion/button@0.1.24 - @lion/calendar@0.1.20 - @lion/checkbox-group@0.1.22 - @lion/checkbox@0.1.20 - @lion/choice-input@0.1.20 - @lion/field@0.1.20 - @lion/fieldset@0.1.20 - @lion/form-system@0.0.23 - @lion/form@0.1.22 - @lion/input-amount@0.1.20 - @lion/input-date@0.1.20 - @lion/input-datepicker@0.1.17 - @lion/input-email@0.1.20 - @lion/input-iban@0.1.21 - @lion/input@0.1.20 - @lion/popup@0.1.24 - @lion/radio-group@0.1.22 - @lion/radio@0.1.20 - @lion/select@0.1.20 - @lion/textarea@0.1.20 - @lion/tooltip@0.1.24 - @lion/validate@0.2.8 |
||
|---|---|---|
| .. | ||
| src | ||
| stories | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-input.js | ||
| package.json | ||
| README.md | ||
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
labelattribute, but the slot can be used to change thehtmlandCSSof the label. For example add ansr-onlyclass 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.
- label: can also be provided via the
- 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>