For situations where the <auro-select> web component cannot be used, a native HTML <select> element with <option> children can be styled with the Auro Design System tokens to approximate the visual appearance of auro-select. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .select class, so the styling must be authored manually using Auro design tokens.

The native select can be reset and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. Only the closed chrome of <select> can be styled — the dropdown panel that opens when the user activates the control is browser-controlled and is largely unstyleable. The pattern below replicates the border, padding, caret, and focus-state colors used by auro-select in its collapsed state.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-height: var(--ds-size-600, 3rem);
  padding: var(--ds-size-100, 0.5rem) var(--ds-size-400, 2rem) var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  color: var(--ds-color-text-primary-default, #1d1d1d);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ds-size-150, 0.75rem) center;
  background-size: var(--ds-size-200, 1rem);
}
​
.select:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 2px;
  border-color: var(--ds-color-border-active-default, #01426a);
}
​
.select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
​
.select:invalid {
  border-color: var(--ds-color-border-error-default, #d6371e);
}

Apply the .select class to a native <select> element and pair it with a <label>:

<label for="destination">Destination</label>
<select id="destination" name="destination" class="select">
  <option value="">Choose a destination</option>
  <option value="sea">Seattle</option>
  <option value="pdx">Portland</option>
  <option value="anc">Anchorage</option>
</select>

Use <optgroup> to group related options under a non-selectable label:

<label for="airport">Airport</label>
<select id="airport" name="airport" class="select">
  <optgroup label="Pacific Northwest">
    <option value="sea">Seattle</option>
    <option value="pdx">Portland</option>
  </optgroup>
  <optgroup label="Alaska">
    <option value="anc">Anchorage</option>
    <option value="fai">Fairbanks</option>
  </optgroup>
</select>

Add the multiple attribute to allow more than one option to be selected. Note that the browser renders multiple selects as a scrollable list box rather than a dropdown, so the caret background image is not appropriate; consider a separate class for this variant:

<label for="preferences">Travel preferences</label>
<select id="preferences" name="preferences" class="select" multiple size="4">
  <option value="window">Window seat</option>
  <option value="aisle">Aisle seat</option>
  <option value="meal">Special meal</option>
  <option value="early">Early boarding</option>
</select>

While the CSS above replicates the visual styling of the closed auro-select trigger, the following functionality built into the auro-select web component is not available when using a plain HTML <select>:

auro-select renders its dropdown panel (the "bib") as part of the component, so option spacing, borders, elevation, and selected-state styling all match the Auro design system. The dropdown panel that opens from a native <select> is rendered by the browser/operating system and cannot be styled — fonts, colors, padding, and the highlight color of the active option are all controlled by the user agent.

auro-select accepts auro-menuoption children whose default slot can contain any HTML — icons, two-line descriptions, badges, or custom markup. Native <option> elements only render plain text; any inline HTML inside an <option> is stripped by the browser.

auro-select exposes a displayValue slot and a forceDisplayValue attribute so the collapsed trigger can show formatted content (markup, icons, a different string than the selected option's label). A native <select> always displays the plain text of the selected <option>.

auro-select exposes setCustomValidity, setCustomValidityValueMissing, setCustomValidityCustomError, and an error attribute for fully customizable error messages per validity state. A native <select> surfaces browser-controlled validation tooltips that can only be overridden via setCustomValidity() on the element and cannot be styled.

auro-select provides a helpText slot that renders below the trigger and automatically swaps to the active validation message when the field is invalid. With a native <select>, you must author the help-text markup, manage its visibility, and wire aria-describedby yourself.

auro-select supports a multiSelect attribute that keeps the dropdown open between selections, renders checkmarks next to chosen options, and exposes the selection as an array via optionSelected. Native <select multiple> renders as a scrolling list box rather than a dropdown and relies on platform-specific modifier keys (Cmd/Ctrl+click) to select multiple items.

auro-select implements its own keyboard strategy (see selectKeyboardStrategy.js) for type-ahead matching, arrow-key navigation, and focus management that is consistent across browsers. Native <select> type-ahead behavior varies by browser and operating system.

auro-select automatically switches its dropdown to a fullscreen sheet on small viewports via the fullscreenBreakpoint attribute, with a configurable headline slot (bib.fullscreen.headline) and close-button label. A native <select> defers entirely to the operating system's native picker, which cannot be themed or labeled.

auro-select supports placement, autoPlacement, noFlip, shift, offset, matchWidth, and flexMenuWidth attributes to control where and how the dropdown opens. A native <select> opens wherever the browser decides, with no developer control.

auro-select manages the ARIA relationships between the trigger, label, help text, listbox, and active option automatically. With a native <select>, you must manage id/for association between label and select, and wire aria-describedby for any help or error text yourself.

auro-select exposes a single value property plus an optionSelected reference to the chosen option element, and dispatches auroSelect-valueSet, input, and auroFormElement-validated events for integration with auro-form. Native <select> fires change and input but does not emit the structured validation events the Auro form system expects.

auro-select tracks a touched state so validation errors only appear after the user has interacted with the field. Native <select> has no built-in touched concept — you must implement focus/blur tracking yourself to avoid showing errors on initial render.

auro-select provides a single reset() method that clears the value and resets validation state in one call. With a native <select>, you must clear the selection and separately clear any custom validation state you are tracking.

auro-select supports layout (classic, emphasized, snowflake) and shape (classic, pill, pill-left, pill-right, snowflake) attributes for design-system-aligned visual variants. A CSS-only select must reimplement each variant by hand.

auro-select consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only select is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-select whenever possible. Fall back to a CSS-styled native <select> only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and accept that the dropdown panel itself will remain unstyled, multi-select and rich option content will not be available, and validation, help text, and ARIA wiring must be reimplemented by hand.