@lion/input NPM | npm.io

0.18.0 • Published 2 years ago

Install

Weekly downloads

656

License

MIT

Repository

Last release

2 years ago

Inputs >> Input >> Overview ||10

import { html } from '@lion/core';
import '@lion/input/define';

A web component that enhances the functionality of the native <input> element.

export const main = () => html`<lion-input label="First Name"></lion-input>`;

Features

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 u-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, placeholder and readonly to the native input.
Can make use of validation.

Installation

npm i --save @lion/input

import '@lion/input/define';

input lion web-components

@lion/form-core

@crossfields/puzzle-elements @everything-registry/sub-chunk-550 @divriots/spooky @divriots/starter-simba @cmmd-web/input @bliss-design-system/input @backlight-dev/sincere-response-8fi2r.simba-kzanpojj @backlight-dev/teste-comp.simba-l9x8ele4 @backlight-dev/m4dz.simba @backlight-dev/phyum.phyum @backlight-dev/dtcg.simba-ktl6nkz3 @backlight-dev/fine-faucet-r5cia.simba-kv9anepq @backlight-dev/another-one.simba-kvs6sh3m @backlight-dev/bespace.simba-kv9mge72 @backlight-dev/degree-undergo-gztam.simba-ldk6j2gd @bulma-web/input @l9/form @lion/form-integrations @lion/form-system @lion/input-amount @lion/input-date @lion/input-email @lion/input-iban @lion/input-range @lion/checkbox @lion/checkbox-group @lion/input-stepper @lion/input-tel @lion/radio @lion/radio-group @michielpauw/stay-or-go-feat-intro @riovir/karin-components ing-simple-cart @zalastax/nolb-_lio chi-wc @slum-ui/input

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago