@litforge/email-input

An email input component with validation, built with Lit.

Overview

The EmailInput component provides a text input specifically for email addresses with built-in validation and error display.

Installation

npm install @litforge/email-input
# or
pnpm add @litforge/email-input
# or
yarn add @litforge/email-input

Basic Usage

<script type="module">
  import '@litforge/email-input';
</script>

<email-input
  label="Email Address"
  placeholder="Enter your email"
  value="${email}"
  @input="${handleEmailChange}"
></email-input>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | undefined | Input label | | placeholder | string | undefined | Placeholder text | | value | string | '' | Input value | | error | string | undefined | Error message to display | | disabled | boolean | false | Disables the input | | required | boolean | false | Marks input as required |

Events

input

Fired when the input value changes.

Examples

Basic Email Input

<email-input
  label="Email"
  placeholder="[email protected]"
></email-input>

With Error

<email-input
  label="Email"
  value="${email}"
  error="${emailError}"
></email-input>

Required Field

<email-input
  label="Email Address"
  required
  error="${validationError}"
></email-input>

Styling

The component uses CSS variables for theming:

email-input {
  --lf-email-input-font-family: 'Inter', sans-serif;
  --lf-email-input-border-color: #e2e8f0;
  --lf-email-input-error-color: #b42318;
  /* ... more variables */
}

TypeScript

import { EmailInput } from '@litforge/email-input';

License

Part of the LitForge component library.