# mds-input

> ## Install

Latest version **0.0.1-beta.2** (published 2023-04-13) · 0 weekly downloads

## Install

```sh
npm install mds-input
pnpm add mds-input
yarn add mds-input
bun add mds-input
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-beta.2 |
| Published | 2023-04-13 |
| First published | 2023-02-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 67.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | moodysmiles |

## Links

- npm: https://www.npmjs.com/package/mds-input
- npm.io page: https://npm.io/package/mds-input

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.4.1
- [@maggioli-design-system/styles](https://npm.io/package/@maggioli-design-system/styles.md) ^10.0.1
- [@maggioli-design-system/mds-icon](https://npm.io/package/@maggioli-design-system/mds-icon.md) ^2.2.0
- [@maggioli-design-system/mds-text](https://npm.io/package/@maggioli-design-system/mds-text.md) ^3.2.0

## Recent versions

- 0.0.1-beta.2 (latest) — 2023-04-13
- 0.0.1-beta.1 — 2023-03-30
- 0.0.1-alpha.6 — 2023-02-06
- 0.0.1-alpha.5 — 2023-02-06
- 0.0.1-alpha.4 — 2023-02-03
- 0.0.1-alpha.3 — 2023-02-03
- 0.0.1-alpha.2 — 2023-02-01
- 0.0.1-alpha.1 — 2023-02-01

## README

# `mds-input` - Lit version

## Install

Install the component via `npm`

```
npm install mds-input
```

Or use `yarn`

```
yarn add mds-input
```

## Use in JavaScript

Import the component in your project

```html
<script type="module">
  import 'mds-input';
</script>
```

His dependencies

```html
<script type="module">
  import { defineCustomElements } from '@maggioli-design-system/mds-text/loader';
  defineCustomElements();
</script>
```

`Maggioli Design System` style in the `head` tag

```html
<link rel="stylesheet" href="./node_modules/@maggioli-design-system/styles/dist/css/colors-rgb.css">
```

The use it in your HTML

```html
<mds-input type="text" placeholder="Write something"></mds-input>
```

## Properties

| Property       | Attribute      | Description                                                                                                     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Default     |
| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `autocomplete` | `autocomplete` | Specifies whether the element should have autocomplete enabled                                                  | `"address" \| "name" \| "url" \| "email" \| "off" \| "on" \| "additional-name" \| "address-level1" \| "address-level2" \| "address-level3" \| "address-level4" \| "address-line1" \| "address-line2" \| "address-line3" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "cc-additional-name" \| "cc-csc" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-family-name" \| "cc-given-name" \| "cc-name" \| "cc-number" \| "cc-type" \| "country" \| "country-name" \| "current-password" \| "family-name" \| "given-name" \| "honorific-prefix" \| "honorific-suffix" \| "impp" \| "language" \| "new-password" \| "nickname" \| "one-time-code" \| "organization" \| "organization-title" \| "photo" \| "postal-code" \| "sex" \| "street-address" \| "tel" \| "tel-area-code" \| "tel-country-code" \| "tel-extension" \| "tel-local" \| "tel-national" \| "transaction-amount" \| "transaction-currency" \| "username"` | `'off'`     |
| `autofocus`    | `autofocus`    | Specifies that the element should automatically get focus when the page loads                                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`     |
| `datalist`     | --             | A list of search terms to be searched from the input field, it should be used with type="search" input.         | `string[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
| `disabled`     | `disabled`     | If true, the element is displayed as disabled                                                                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`     |
| `icon`         | `icon`         | An icon displayed at the right of the input                                                                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `max`          | `max`          | Specifies the maximum value use it with input type="number" or type="date" Example: max="180", max="2046-12-04" | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `maxlength`    | `maxlength`    | Specifies the maximum number of characters allowed in an element use it with input type="number"                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `min`          | `min`          | Specifies the minimum value use it with input type="number" or type="date" Example: min="-3", min="1988-04-15"  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `minlength`    | `minlength`    | Specifies the minimum number of characters allowed in an element use it with input type="number"                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `name`         | `name`         | Is needed to reference the form data after the form is submitted                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `pattern`      | `pattern`      | Specifies a regular expression that element\'s value is checked against                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `placeholder`  | `placeholder`  | Specifies a short hint that describes the expected value of the element                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `readonly`     | `readonly`     | Specifies that the element is read-only                                                                         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`     |
| `required`     | `required`     | Specifies that the element must be filled out before submitting the form                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`     |
| `step`         | `step`         | Specifies the interval between legal numbers in an input field                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
| `type`         | `type`         | Specifies the type of input element                                                                             | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "textarea" \| "time" \| "url"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'text'`    |
| `value`        | `value`        | Specifies the value of the input element                                                                        | `number \| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
| `variant`      | `variant`      | Sets the variant of the input field                                                                             | `"error" \| "info" \| "success" \| "warning"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
| `variantTip`   | `variant-tip`  | Sets the word(s) of the variant of the input field                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |


## Events

| Event          | Description                                                                      | Type                         |
| -------------- | -------------------------------------------------------------------------------- | ---------------------------- |
| `blurEvent`    | Emits a void event when input element is blurred                                 | `CustomEvent<void>`          |
| `changeEvent`  | Emits an InputChangeEventDetail when the value of the input element changes      | `CustomEvent<InputValue>`    |
| `focusEvent`   | Emits a void event when input element is focused                                 | `CustomEvent<void>`          |
| `inputEvent`   | Emits a KeyboardEvent when a keboard key is pressed on the focused input element | `CustomEvent<InputEvent>`    |

## Form support for Safari

To be able to use the form component in Safari, you will need to include [this](https://github.com/calebdwilliams/element-internals-polyfill) polyfill in your application's dependencies and add it in your main TypeScript file:

```typescript
import 'element-internals-polyfill'
```

or in your main HTML file like:

```html
<script type="module">
  import 'element-internals-polyfill'
</script>
```

---

Built with `lit` and `vite`

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