Select Input

Default (40px height)

<div class="elv-select">
  <select class="elv-select__field" aria-label="Select option">
    <option value="" disabled selected>Select an option...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

Select States

<!-- Error State -->
<div class="elv-select">
  <select
    class="elv-select__field elv-select__field--error"
    aria-invalid="true"
    aria-describedby="error-id"
  >
    <option value="" disabled selected>Please select...</option>
    <option value="1">Option 1</option>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>
<p id="error-id" class="elv-input-error" role="alert">Error message</p>

<!-- Disabled -->
<div class="elv-select">
  <select class="elv-select__field" disabled>
    <option value="" disabled selected>Disabled...</option>
    <option value="1">Option 1</option>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

<!-- With Label -->
<label class="elv-input-label" for="select-id">Label</label>
<div class="elv-select">
  <select id="select-id" class="elv-select__field">
    <option value="" disabled selected>Choose...</option>
    <option value="1">Option 1</option>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

<!-- With Helper Text -->
<div class="elv-select">
  <select class="elv-select__field">...</select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>
<p class="elv-input-helper">Helper text</p>

<!-- Required -->
<label class="elv-input-label">
  Label <span class="elv-required">*</span>
</label>
<div class="elv-select">
  <select class="elv-select__field" required aria-required="true">...</select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

Large Variant (48px height)

<div class="elv-select elv-select--lg">
  <select class="elv-select__field">
    <option value="" disabled selected>Choose...</option>
    <option value="1">Option 1</option>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

Grouped Options

<div class="elv-select">
  <select class="elv-select__field">
    <option value="" disabled selected>Browse by category...</option>
    <optgroup label="Sales & Marketing">
      <option value="crm">CRM Software</option>
      <option value="marketing">Marketing Automation</option>
    </optgroup>
    <optgroup label="IT & Development">
      <option value="project">Project Management</option>
    </optgroup>
  </select>
  <span class="elv-select__icon material-symbols-outlined">expand_more</span>
</div>

Complete Form Example

Accessibility Notes

• Labels: Always pair selects with labels using for and id attributes
• ARIA Labels: Include aria-label when label is not visible
• Error States: Use aria-invalid="true" and aria-describedby for error messages
• Required Fields: Use required attribute and aria-required="true"
• Focus State: 3px solid outline (#c3bde5 / P40) — CRITICAL for accessibility
• Keyboard Navigation:
  • Tab to focus select
  • Space or Enter to open dropdown
  • Arrow Up/Down to navigate options
  • Enter to select
  • Escape to close without selecting
• Placeholder Option: Use disabled selected for placeholder text
• Helper Text: Use aria-describedby to link helper text to select
• Touch Targets: Minimum 40px height, use 48px for better mobile accessibility
• Native Functionality: Uses native <select> for maximum compatibility and accessibility

Design System Specs

Spacing Guidelines

Implementation Notes

• Native Select: Uses native HTML <select> for maximum compatibility, accessibility, and mobile OS integration
• No JavaScript Required: Fully functional without JavaScript — keyboard and mouse interactions work natively
• Custom Styling: Browser default styling removed with appearance: none for consistent cross-browser appearance
• Dropdown Icon: Custom icon positioned absolutely to prevent click-blocking — uses pointer-events: none
• Placeholder Pattern: First option with disabled selected attributes creates placeholder text effect
• Grouped Options: Use <optgroup> for categorizing related options
• Mobile Behavior: Native select on mobile devices shows OS-native picker for optimal UX