---
title: 'Input: Overview'
parts:
  - Input
  - Overview
eleventyNavigation:
  key: 'Input: Overview'
  order: 10
  parent: Input
  title: Overview
---

# Input: Overview

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

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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/validate.md).

## Installation

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

```js
import '@lion/ui/define/lion-input.js';
```