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
validandinvalidevents when validity changes
npm i -S @substrate-system/emailThis exposes ESM and common JS via package.json exports field.
import { email } from '@substrate-system/email'const { email } = require('@substrate-system/email')See ./example, and the demo page.
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
})The package.json exposes css, suitable for vite or esbuild:
import '@substrate-system/email/css'Or minified:
import '@substrate-system/email/css/min'If using a CSS processor, you can import from the CSS files:
@import url("../node_modules/@substrate-system/email/dist/index.min.css");substrate-email {
--bgc: #fafafa;
--color: black;
--focus: #005fcc;
--error-color: red;
}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.
import { SubstrateEmail } from '@substrate-system/email'
// create a web component named `substrate-email`
SubstrateEmail.define()Override the tag property to change the tag name:
import { SubstrateEmail } from '@substrate-system/email'
// set a custom name
SubstrateEmail.TAG = 'cool-input'
SubstrateEmail.define()<div>
<substrate-email></substrate-email>
</div>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.
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<head>
<link rel="stylesheet" href="./substrate-email.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./substrate-email.min.js"></script>
</body>