COMPONENTS

Native select dropdowns

An optional CSS-only enhancement styles ordinary select option lists with the existing framework tokens. No classes, extra wrappers or new data attributes.

Usage

Markup: Native select and option elements; no classes.

Behaviour: Support-gated customizable dropdown; native fallback. Multiple/listbox selects unchanged.

  • Load reva.selects.css after the global core, or reva.selects.scoped.css after the scoped core. The documentation loads the extension for its live examples.
  • The enhancement is guarded by support for appearance:base-select and ::picker(select). Unsupported browsers retain their ordinary native picker. Supported browsers use an in-page picker rather than the operating-system mobile selection sheet.
  • Only single-selection dropdowns are enhanced. Multiple selects and size greater than one keep their native listbox treatment. Labels, names, values, required validation and disabled options remain native HTML.
  • Theme, palette, typography, size, density, shape, border and depth use existing tokens. The option surface stays opaque for readability, including inside a glass parent. Selected options keep the browser checkmark; disabled options remain unavailable.
  • Picker icons respect motion and reduced-motion preferences. Forced colours use system colours and visible selection states. Browser keyboard behaviour and form submission are retained; CSS does not search or fetch options.

Component API and styling module · Inherited appearance settings

Ordinary select, framework option list

The same simple HTML works with and without the optional stylesheet.

HTMLSelect text to copy
<label for="native-select-project">Project status</label>
<select id="native-select-project" name="status">
  <option value="active">In progress</option>
  <option value="review">In review</option>
  <option value="complete">Complete</option>
</select>

Groups and disabled options

Native groups, disabled options and a longer label.

HTMLSelect text to copy
<label for="native-select-team">Assign a team</label>
<select id="native-select-team" name="team">
  <option value="" disabled selected>Choose a team</option>
  <optgroup label="Available teams">
    <option value="operations">Operations and service delivery</option>
    <option value="design">Design</option>
  </optgroup>
  <optgroup label="Unavailable">
    <option value="finance" disabled>Finance — assignment unavailable</option>
  </optgroup>
</select>

Native listbox retained

Multiple selection is deliberately outside the enhanced dropdown contract.

HTMLSelect text to copy
<label for="native-select-members">Team members</label>
<select id="native-select-members" name="members" multiple size="3">
  <option value="alex">Alex</option>
  <option value="sam">Sam</option>
  <option value="jamie">Jamie</option>
</select>