Input Email
An email address input. Provides native browser email validation, appropriate mobile keyboard, and autocomplete hints.
Default
Email input with browser validation and email keyboard on mobile.
<diwa-input-email label="Email address" placeholder="you@example.com"></diwa-input-email>Validation states
Error and success states with contextual messages.
<diwa-input-email label="Email address" value="notvalid" state="error" message="Please enter a valid email address."></diwa-input-email><diwa-input-email label="Email address" value="jane@example.com" state="success" message="Email address verified."></diwa-input-email>Compact
Reduced height for toolbar or filter bar usage.
<diwa-input-email label="Email address" placeholder="you@example.com" compact></diwa-input-email>Disabled
Non-interactive state for read-only contexts.
<diwa-input-email label="Email address" value="jane@example.com" disabled></diwa-input-email>Slots
Use end to append a fixed suffix inside the input border (e.g. a domain), and label-after to place contextual icons or links after the label.
<diwa-input-email label="Work email" placeholder="user">
<span slot="end">@corp.com</span>
<diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-email>