https://github.com/substrate-system/email
Email input web component
https://github.com/substrate-system/email
email input web-component
Last synced: 12 months ago
JSON representation
Email input web component
- Host: GitHub
- URL: https://github.com/substrate-system/email
- Owner: substrate-system
- License: other
- Created: 2025-05-15T22:56:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-14T00:21:53.000Z (about 1 year ago)
- Last Synced: 2025-06-14T01:26:20.422Z (about 1 year ago)
- Topics: email, input, web-component
- Language: TypeScript
- Homepage: https://substrate-system.github.io/email/
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# email
[](https://github.com/substrate-system/email/actions/workflows/nodejs.yml)
[](README.md)
[](README.md)
[](https://packagephobia.com/result?p=@substrate-system/email)
[](https://bundlephobia.com/package/@substrate-system/email)
[](https://semver.org/)
[](./CHANGELOG.md)
[](LICENSE)
Web component for email inputs.
**_featuring:_**
* robust client-side validation -- check that email is of the form `abc@domain.tld`
* good UX for validation
- errors are only shown if the input has been focused
- errors are not shown until the input blurs
* add a class to the element when it is not valid
* emit `valid` and `invalid` events when validity changes
[See a live demo](https://substrate-system.github.io/email/)
- [Install](#install)
- [Modules](#modules)
* [ESM](#esm)
* [Common JS](#common-js)
- [Example](#example)
- [CSS](#css)
* [Bundler](#bundler)
* [CSS imports](#css-imports)
* [Customize CSS via some variables](#customize-css-via-some-variables)
- [Use](#use)
* [HTML](#html)
* [pre-built](#pre-built)
## Install
```sh
npm i -S @substrate-system/email
```
## Modules
This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
### ESM
```js
import { email } from '@substrate-system/email'
```
### Common JS
```js
const { email } = require('@substrate-system/email')
```
## Example
See [./example](./example/), and [the demo page](https://substrate-system.github.io/email/).
```js
import { SubstrateEmail } from '@substrate-system/email'
import { SubstrateButton } from '@substrate-system/button'
SubstrateEmail.define()
SubstrateButton.define()
const qs = document.querySelector
const input = qs('form substrate-email')
input?.addEventListener('valid', ev => {
console.log('We are valid!', ev)
qs('substrate-button')!.disabled = false
})
input?.addEventListener('invalid', ev => {
console.log('no longer valid....', ev)
qs('substrate-button')!.disabled = true
})
```
## CSS
### Bundler
The `package.json` exposes css, suitable for `vite` or `esbuild`:
```js
import '@substrate-system/email/css'
```
Or minified:
```js
import '@substrate-system/email/css/min'
```
### CSS imports
If using a CSS processor, you can import from the CSS files:
```css
@import url("../node_modules/@substrate-system/email/dist/index.min.css");
```
### Customize CSS via some variables
```css
substrate-email {
--bgc: #fafafa;
--color: black;
--focus: #005fcc;
--error-color: red;
}
```
------------------------------------------------------------------------
## Use
You can set a name for this custom element with the static method
`define`. To use the default name, `substrate-email`, just import and
call `.define()`.
> [!CAUTION]
> If you change the name of the web component, it will break the CSS.
```js
import { SubstrateEmail } from '@substrate-system/email'
// create a web component named `substrate-email`
SubstrateEmail.define()
```
Override the `tag` property to change the tag name:
```js
import { SubstrateEmail } from '@substrate-system/email'
// set a custom name
SubstrateEmail.tag = 'cool-input'
SubstrateEmail.define()
```
### HTML
```html
```
### pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is
accessible to your web server, then link to them in HTML.
#### copy
```sh
cp ./node_modules/@substrate-system/email/dist/index.min.js ./public/substrate-email.min.js
cp ./node_modules/@substrate-system/email/dist/style.min.css ./public/substrate-email.css
```
#### HTML
```html
```