The native <select> element is one of the most difficult HTML elements to style, has no support for rich option content, and behaves inconsistently across browsers. auro-select provides a fully styled, accessible, and feature-rich replacement.

Native <select> has basic accessibility, but the dropdown behavior, keyboard navigation, and screen reader announcements vary between browsers and platforms.

auro-select provides:

• ARIA combobox pattern — The trigger uses role="combobox" with aria-expanded, aria-controls, and aria-activedescendant for proper screen reader semantics.
• Full keyboard navigation — Arrow Up/Down navigate options (with Alt modifier for jumping to first/last), Enter selects, Escape closes, Home/End jump to boundaries, Tab closes and advances focus.
• Screen reader announcements — aria-live="polite" announces selections, aria-live="assertive" announces validation errors. Each option carries aria-setsize and aria-posinset for position context.
• Active descendant — Focus stays on the trigger while arrow keys highlight options, so screen readers announce the highlighted option without disrupting focus.

<option> elements accept only plain text. There is no native way to add icons, secondary text, or nested groups.

auro-select uses auro-menu internally, enabling:

• Full HTML content in each option (icons, descriptions, badges)
• Nested option groups for hierarchical organization
• Checkmark indicators for the selected option
• Option sizing (sm, md) for different information density

Native <select multiple> renders a scrollable list box — a UI pattern widely regarded as confusing. Users must Ctrl+click to select multiple items, and there is no checkmark or visual feedback.

auro-select with multiSelect provides:

• A dropdown trigger that stays closed between selections
• Checkmarks on each selected option
• A JSON-stringified array value for easy consumption
• clearSelection() to reset all selections

Native <select> renders a browser-controlled popup that cannot be repositioned, resized, or presented differently on mobile.

auro-select adapts to the viewport:

• Desktop — Options appear in a positioned dropdown using Floating UI, with configurable placement, offset, flip, shift, and auto-placement
• Mobile — Options open in a fullscreen dialog below a configurable breakpoint (fullscreenBreakpoint)
• Width control — matchWidth sizes the dropdown to the trigger, flexMenuWidth lets it size independently

Native <select> validation is limited to required. Error messages are browser-controlled.

auro-select integrates with the Auro form validation system:

• Required field validation with custom messaging
• Custom error messages per validity state (setCustomValidityCustomError, setCustomValidityValueMissing)
• noValidate to disable auto-validation on blur
• Error display via the helpText slot
• Dispatches auroFormElement-validated events for parent form coordination

Native <select> always shows the selected option's text. There is no way to display a formatted or alternative representation.

auro-select provides:

• A displayValue slot for custom HTML rendering of the selected value
• A valueText slot for formatted text display
• A placeholder slot (or attribute) for empty-state messaging
• forceDisplayValue to always show the custom display slot

Native <select> styling is notoriously difficult. The dropdown arrow, option list, and selected value display are all browser-controlled and resist CSS customization.

auro-select is built with the Auro Design System:

• Three layout options: classic, emphasized, snowflake
• Shape variants: box, pill, pill-left, pill-right
• Size options (lg, xl for emphasized layout)
• Light and dark theme support (appearance)
• CSS ::part() selectors (dropdownTrigger, dropdownChevron, dropdownSize, helpText)