PHPackages                             umer936/multi-emails-input - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. umer936/multi-emails-input

ActiveLibrary[Utility & Helpers](/categories/utility)

umer936/multi-emails-input
==========================

multi-emails-input is a small library to convert a div into a multiple emails input

v1.1(2y ago)0551[1 PRs](https://github.com/umer936/multi-emails-input/pulls)JavaScript

Since Mar 21Pushed 1y agoCompare

[ Source](https://github.com/umer936/multi-emails-input)[ Packagist](https://packagist.org/packages/umer936/multi-emails-input)[ Docs](https://github.com/umer936/multi-emails-input)[ RSS](/packages/umer936-multi-emails-input/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)DependenciesVersions (2)Used By (0)

multi-emails-input
==================

[](#multi-emails-input)

multi-emails-input is a small library to convert a div into a multiple emails input, basically if you have any `div` and you want to convert it into a multi emails input this lib is best to do that.

This lib is written in pure JavaScript and could be converted to an npm package if needed.

How to use?
-----------

[](#how-to-use)

You can start by adding the JavaScript file into html.

```

```

Also add the CSS file into your head tag

```

```

You can wrap your div selector with the provided function as follow:

```

  const inputContainerNode = document.querySelector('#emails-input');
  const emailsInput = EmailsInput(inputContainerNode);

```

This will convert the normal div into a multi emails input container.

[![](https://camo.githubusercontent.com/c6a698a58cd27e874d9c0441eb9475030999aa84adb526eafcaa1250225c9fcf/68747470733a2f2f692e696d6775722e636f6d2f4a523744485a7a2e676966)](https://camo.githubusercontent.com/c6a698a58cd27e874d9c0441eb9475030999aa84adb526eafcaa1250225c9fcf/68747470733a2f2f692e696d6775722e636f6d2f4a523744485a7a2e676966)

Features
--------

[](#features)

- Email block can be created by pressing `Enter`, entering comma `,` , or by losing focus on the input field `blur` event.
- A Block can be deleted by the `X` sign in each block.
- Pasted emails will be converted into blocks immediately. (e.g., “`max@mail.ru`, `ivan@mail.ru`”) they should be converted into multiple blocks.
- Invalid emails are not added to the returned list.
- Duplicated emails have different style to expose them and can be deleted.
- `EmailsInput` function as shown in the example above returns an object of 2
    - `getEmailsList`: an function that returns an array of valid emails as shown in the element.
    - `addEmail`: a function that you can send an email and it will be added to the list.
- all code has JSDOC provided that should help in types.
- library is tested and is working fine on all browsers including `ie11`.

Options
-------

[](#options)

- `limitEmailsToDomain`: is an option to define what email is valid and what is not so for example if you provided this option as `gmail` then any email other than gmail will be considered as invalid.
- `invalidEmailClass`: is an option to provide a different class for the invalid emails that overrides the default style in case the user needs to.
- `validEmailClass`: is an option to provide a different class for the valid emails same as the invalid one.
- Example:

```
const emailsInput = EmailsInput(inputContainerNode, {
  limitEmailsToDomain: 'gmail',
  invalidEmailClass: 'custom-invalid-email',
  validEmailClass: 'custom-valid-email',
});
```

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance27

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 89.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

787d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d9259edd639d2ec8a239cab88c0604b70a5fcaf13c8f2250f1ff080ed6514456?d=identicon)[umer936](/maintainers/umer936)

---

Top Contributors

[![medhatdawoud](https://avatars.githubusercontent.com/u/337888?v=4)](https://github.com/medhatdawoud "medhatdawoud (17 commits)")[![umer936](https://avatars.githubusercontent.com/u/2078163?v=4)](https://github.com/umer936 "umer936 (2 commits)")

---

Tags

javascriptcomponentinputemails

### Embed Badge

![Health badge](/badges/umer936-multi-emails-input/health.svg)

```
[![Health](https://phpackages.com/badges/umer936-multi-emails-input/health.svg)](https://phpackages.com/packages/umer936-multi-emails-input)
```

###  Alternatives

[tightenco/ziggy

Use your Laravel named routes in JavaScript.

4.3k41.6M267](/packages/tightenco-ziggy)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k30.5M336](/packages/matthiasmullie-minify)[tedivm/jshrink

Javascript Minifier built in PHP

76137.7M139](/packages/tedivm-jshrink)[dlds/yii2-mlm

Yii2 Multi Level Marketing component

183.8k](/packages/dlds-yii2-mlm)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)