Installations

npm install @substrate-system/email

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.16.0

NPM Version

10.9.2 Releases

Unable to fetch releases

Download Statistics

Total Downloads

1,459

Last Day

10

Last Week

138

Last Month

881

Last Year

1,459

Maintainers

1

Package Meta Information

Latest Version

0.0.18

Package Id

@substrate-system/email@0.0.18

Unpacked Size

136.91 kB

Size

24.41 kB

File Count

26

NPM Version

10.9.2

Node Version

20.16.0

Published on

Jul 20, 2025

Total Downloads

Cumulative downloads

Total Downloads

1,459

Last Day

-70.6%

10

Compared to previous day

Last Week

-20.7%

138

Compared to previous week

Last Month

114.9%

881

Compared to previous month

Last Year

0%

1,459

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

@substrate-system/input @substrate-system/signs

Dev Dependencies

23

email

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

Install
Modules
- ESM
- Common JS
Example
CSS
Use
- HTML
- pre-built

Install

1npm i -S @substrate-system/email

Modules

This exposes ESM and common JS via package.json exports field.

ESM

1import { email } from '@substrate-system/email'

Common JS

1const { email } = require('@substrate-system/email')

Example

See ./example, and the demo page.

1import { SubstrateEmail } from '@substrate-system/email'
2import { SubstrateButton } from '@substrate-system/button'
3SubstrateEmail.define()
4SubstrateButton.define()
5const qs = document.querySelector
6
7const input = qs('form substrate-email')
8input?.addEventListener('valid', ev => {
9    console.log('We are valid!', ev)
10    qs('substrate-button')!.disabled = false
11})
12
13input?.addEventListener('invalid', ev => {
14    console.log('no longer valid....', ev)
15    qs('substrate-button')!.disabled = true
16})

CSS

Bundler

The package.json exposes css, suitable for vite or esbuild:

1import '@substrate-system/email/css'

Or minified:

1import '@substrate-system/email/css/min'

CSS imports

If using a CSS processor, you can import from the CSS files:

1@import url("../node_modules/@substrate-system/email/dist/index.min.css");

Customize CSS via some variables

1substrate-email {
2    --bgc: #fafafa;
3    --color: black;
4    --focus: #005fcc;
5    --error-color: red;
6}

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.

1import { SubstrateEmail } from '@substrate-system/email'
2
3// create a web component named `substrate-email`
4SubstrateEmail.define()

Override the tag property to change the tag name:

1import { SubstrateEmail } from '@substrate-system/email'
2
3// set a custom name
4SubstrateEmail.TAG = 'cool-input'
5
6SubstrateEmail.define()

HTML

1<div>
2    <substrate-email></substrate-email>
3</div>

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

1cp ./node_modules/@substrate-system/email/dist/index.min.js ./public/substrate-email.min.js
2cp ./node_modules/@substrate-system/email/dist/style.min.css ./public/substrate-email.css

HTML

1<head>
2    <link rel="stylesheet" href="./substrate-email.css">
3</head>
4<body>
5    <!-- ... -->
6    <script type="module" src="./substrate-email.min.js"></script>
7</body>

No vulnerabilities found.