Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Date Input

Accessible date input field with proper format instructions and keyboard support. Provides native date picker on supporting browsers.

Format: MM/DD/YYYY

HTML

<label for="birth-date" class="ads-label">Birth date</label>
<div id="date-helper" class="ads-helper-text">
    Format: MM/DD/YYYY
</div>
<input 
    type="date" 
    id="birth-date" 
    class="ads-input"
    aria-describedby="date-helper"
>

CSS

input[type="date"].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="date"].ads-input:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-color: var(--ads-primary-color);
}