Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Email Input

Accessible email input field with proper validation and error messaging for screen readers. Uses type="email" for native keyboard support on mobile devices.

Enter a valid email address

HTML

<label for="email" class="ads-label">Email address</label>
<div id="email-helper" class="ads-helper-text">
    Enter a valid email address
</div>
<input 
    type="email" 
    id="email" 
    class="ads-input"
    aria-describedby="email-helper"
    required
>

CSS

input[type="email"].ads-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 2px solid var(--ads-border-color);
    border-radius: 4px;
    font-family: var(--ads-font-family);
}

input[type="email"].ads-input:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-color: var(--ads-primary-color);
}

input[type="email"].ads-input:invalid {
    border-color: var(--ads-error-color);
}