83fc711061
- @lion/ajax@0.4.1 - @lion/button@0.7.2 - @lion/calendar@0.9.1 - @lion/checkbox-group@0.10.1 - @lion/core@0.7.0 - @lion/dialog@0.7.1 - @lion/fieldset@0.13.1 - @lion/form-core@0.1.1 - @lion/form-integrations@0.1.2 - @lion/form@0.6.1 - @lion/helpers@0.5.0 - @lion/icon@0.6.1 - @lion/input-amount@0.7.1 - @lion/input-date@0.7.1 - @lion/input-datepicker@0.14.1 - @lion/input-email@0.8.1 - @lion/input-iban@0.9.1 - @lion/input-range@0.4.1 - @lion/input@0.7.1 - @lion/localize@0.11.1 - @lion/overlays@0.16.1 - @lion/radio-group@0.10.1 - remark-extend@0.2.0 - @lion/select-rich@0.18.2 - @lion/select@0.7.1 - @lion/steps@0.5.1 - @lion/switch@0.10.2 - @lion/tabs@0.4.1 - @lion/textarea@0.7.1 - @lion/tooltip@0.11.1 - @lion/validate-messages@0.1.1 |
||
|---|---|---|
| .. | ||
| src | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-input-email.js | ||
| package.json | ||
| README.md | ||
Input Email
lion-input-email component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
import { html } from 'lit-html';
import { Validator } from '@lion/form-core';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import './lion-input-email.js';
export default {
title: 'Forms/Input Email',
};
loadDefaultFeedbackMessages();
export const main = () => {
return html` <lion-input-email label="Email" name="email"></lion-input-email> `;
};
Live Demo/Documentation
See our storybook for a live demo and API documentation
Features
- Based on lion-input
- Makes use of email validators with corresponding error messages in different languages
- IsEmail (default)
How to use
Installation
npm i --save @lion/input-email
import { LionInputEmail } from '@lion/input-email';
// or
import '@lion/input-email/lion-input-email.js';
Examples
Faulty Prefilled
When prefilling with a faulty input, an error feedback message will show.
Use loadDefaultFeedbackMessages to get our default feedback messages displayed on it.
export const faultyPrefilled = () => html`
<lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
`;
Custom Validator
export const customValidator = () => {
class GmailOnly extends Validator {
static get validatorName() {
return 'GmailOnly';
}
execute(value) {
let hasError = false;
if (!(value.indexOf('gmail.com') !== -1)) {
hasError = true;
}
return hasError;
}
static async getMessage() {
return 'You can only use gmail.com email addresses.';
}
}
return html`
<lion-input-email
.modelValue=${'foo@bar.com'}
.validators=${[new GmailOnly()]}
label="Email"
></lion-input-email>
`;
};