Input Email

An email address input. Provides native browser email validation, appropriate mobile keyboard, and autocomplete hints.

When to use

Use diwa-input-email for email address fields. The browser provides native email format validation (requires an @ sign), shows an email-optimised keyboard on mobile, and enables browser autocomplete for saved email addresses.

Vanilla JS

<diwa-input-email
  id="email-input"
  label="Email address"
  placeholder="you@example.com"
  required
  autocomplete="email"
></diwa-input-email>

<script>
  document.getElementById('email-input')
    .addEventListener('change', (e) => console.log(e.detail));
</script>

React

<diwa-input-email
  label="Email address"
  placeholder="you@example.com"
  state={emailError ? 'error' : 'none'}
  message={emailError}
  required
  onchange={(e: CustomEvent<string>) => setEmail(e.detail)}
/>

Autocomplete

Pass autoComplete="email" to hint to the browser that autocomplete suggestions for saved email addresses should be offered. See the WHATWG autocomplete spec for the full list of tokens.

Dos and don'ts

✓Always supply a visible label - screen readers and autofill rely on it.
✓Pass autoComplete="email" to enable browser-saved email suggestions.
✓Set state="error" and a clear message when server-side validation fails.
✓Use placeholder to show an example format (e.g. you@example.com).

Don't

✕Don't rely solely on the browser's built-in format validation - always validate on the server.
✕Don't use placeholder as a replacement for the label - it disappears on input and is not accessible.
✕Don't block paste - users often paste emails from password managers.
✕Don't add overly strict regex patterns that reject valid addresses (e.g. those with + or long TLDs).