---
title: 'Input Email: Use Cases'
parts:
  - Input Email
  - Use Cases
eleventyNavigation:
  key: 'Input Email: Use Cases'
  order: 20
  parent: Input Email
  title: Use Cases
---

# Input Email: Use Cases

```js script
import { html } from '@mdjs/mdjs-preview';
import { Validator } from '@lion/ui/form-core.js';
import '@lion/ui/define/lion-input-email.js';
```

## 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.

```js preview-story
export const faultyPrefilled = () => html`
  <lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
`;
```

## Custom Validator

```js preview-story
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>
  `;
};
```