Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@lion/input-email

0.8.1 • Public • Published

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>
  `;
};

Install

npm i @lion/input-email

DownloadsWeekly Downloads

599

Version

0.8.1

License

MIT

Unpacked Size

28.8 kB

Total Files

9

Last publish

Collaborators

  • avatar