# @lion/input

> It enhances the functionality of the native `` element

Latest version **0.18.0** (published 2022-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lion/input
pnpm add @lion/input
yarn add @lion/input
bun add @lion/input
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2022-05-31 |
| First published | 2019-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1964 |
| Author | ing-bank |
| Maintainers | narzac, d4kmor |
| Keywords | input, lion, web-components |

## Links

- npm: https://www.npmjs.com/package/@lion/input
- Repository: https://github.com/ing-bank/lion
- Homepage: https://github.com/ing-bank/lion/
- Issues: https://github.com/ing-bank/lion/issues
- npm.io page: https://npm.io/package/@lion/input

## Dependencies (1)

- [@lion/form-core](https://npm.io/package/@lion/form-core.md) ^0.18.0

## Recent versions

- 0.18.0 (latest) — 2022-05-31
- 0.14.5 (lit1) — 2023-04-13
- 0.14.4 — 2022-05-16
- 0.14.3 — 2022-05-09
- 0.14.2 — 2022-05-09
- 0.17.0 — 2022-04-06
- 0.16.0 — 2022-03-07
- 0.15.8 — 2022-01-04
- 0.15.7 — 2021-11-11
- 0.15.6 — 2021-10-19
- 0.15.5 — 2021-09-01
- 0.15.4 — 2021-07-30
- 0.15.3 — 2021-07-21
- 0.15.2 — 2021-07-05
- 0.15.1 — 2021-06-16
- … 161 more at https://npm.io/package/@lion/input/versions

## README

# Input >> Overview ||10

```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/input/define';
```

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

```js preview-story
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](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/validate.md).

## Installation

```bash
npm i --save @lion/input
```

```js
import '@lion/input/define';
```

---
_Source: https://npm.io/package/@lion/input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._