Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Select Dropdown

Accessible select dropdown menus with proper labeling and keyboard navigation. No placeholder text - use a default option or helper text instead.

Choose your country from the list

HTML

<label for="country" class="ads-label">Country</label>
<div id="country-helper" class="ads-helper-text">
    Choose your country from the list
</div>
<select 
    id="country" 
    class="ads-select"
    aria-describedby="country-helper"
>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
</select>

CSS

.ads-select {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 2px solid var(--ads-border-color);
    border-radius: 4px;
    font-family: var(--ads-font-family);
    background-color: white;
}

.ads-select:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-color: var(--ads-primary-color);
}