Forms

Dropdown

Native select with an inset chevron, and a details-based action menu that works with JavaScript off.

.selectwrap · composes .select · native details menu

<div class="field" style="max-width:20rem">
  <label for="dd-region">Region</label>
  <span class="selectwrap"><select class="select" id="dd-region">
    <option>Singapore</option>
    <option>Philippines</option>
    <option>Sri Lanka</option>
    <option>Indonesia</option>
  </select></span>
</div>

<details style="position:relative;display:inline-block">
  <summary class="btn btn--secondary" style="list-style:none">Export</summary>
  <div class="card" style="position:absolute;left:0;margin-top:var(--space-2);min-width:12rem;padding:var(--space-2);z-index:10">
    <a href="overview.html" style="display:block;padding:var(--space-2) var(--space-3);text-decoration:none;color:var(--text);border-radius:var(--radius-sm)">Download CSV</a>
    <a href="overview.html" style="display:block;padding:var(--space-2) var(--space-3);text-decoration:none;color:var(--text);border-radius:var(--radius-sm)">Download PDF</a>
    <a href="overview.html" style="display:block;padding:var(--space-2) var(--space-3);text-decoration:none;color:var(--text);border-radius:var(--radius-sm)">Send to email</a>
  </div>
</details>

Usage

• For choosing one value, use the native <select class="select"> inside a .selectwrap: the wrapper draws the chevron inset from the edge and the platform provides the option list, keyboard support, and mobile pickers.
• Which of the two treatments it takes follows from where it sits. Inside a .field it is a field: it fills the column and has a label above it. Inside .filterrow or .listfooter it is a control in a row, so it takes the Filters trigger's height, radius and inset padding — otherwise a bare select reads as a text field parked among buttons, with its label crowding the left edge.
• For an action menu, use native <details> with a button-styled <summary> and a .card panel: it opens on click, closes on a second click, and needs no JavaScript.
• Menus are click-driven, never hover: touch devices and keyboard users depend on it.
• Keep menu items short, verb-first, and never more than seven; longer lists belong in a select.