Grouped Dropdown Showcase

This showcase uses the native .dsx-select with optgroup, because that is the best current dsx fit for categorized single-select menus.

Live Preview

What it demonstrates

A realistic form field with .dsx-field, visible label, and helper text
Categorized options with native optgroup labels inside .dsx-select
A compact toolbar/filter variant built with .dsx-large-token and .dsx-select--small
Supporting filter actions with .dsx-btn, .dsx-btn--sm, and .dsx-btn--link
Small supporting tokens that make the menu sections visible even before the select is opened

Why this primitive was chosen

The current dsx-dropdown-typeahead component is useful for searchable or multi-select flows, but it does not yet expose grouped sections. The native select already has ds2 styling for optgroup, so it produces the cleanest grouped dropdown result today.

CSS building blocks

File	Classes used
`css/form-field.css`	`.dsx-field`, `.dsx-field__label`, `.dsx-field__hint`, `.dsx-field__control`
`css/select.css`	`.dsx-select`, `.dsx-select--small`
`css/large-token.css`	`.dsx-large-token`, `.dsx-large-token__label`
`css/buttons.css`	`.dsx-btn`, `.dsx-btn--secondary`, `.dsx-btn--sm`, `.dsx-btn--link`, `.dsx-btn--icon`, `.dsx-btn--flat-left`
`css/tokens-chips.css`	`.dsx-token`, `.dsx-token--highlight`, `.dsx-token-list`

Pattern summary

<div class="dsx-field">
  <label class="dsx-field__label" for="routing-queue">Routing queue</label>
  <div class="dsx-field__control">
    <select class="dsx-select" id="routing-queue" aria-describedby="routing-queue-hint">
      <optgroup label="Customer support">
        <option>Billing dispute</option>
        <option>Shipment exception</option>
      </optgroup>
      <optgroup label="Specialist review">
        <option>Fraud investigation</option>
        <option>Legal escalation</option>
      </optgroup>
    </select>
  </div>
  <div class="dsx-field__hint" id="routing-queue-hint">
    Queues are grouped by the team that receives the request first.
  </div>
</div>

<div class="dsx-large-token">
  <span class="dsx-large-token__label">Queue</span>
  <select class="dsx-select dsx-select--small" aria-label="Filter by queue">
    <optgroup label="Customer support">
      <option>Billing dispute</option>
    </optgroup>
    <optgroup label="Specialist review">
      <option>Fraud investigation</option>
    </optgroup>
  </select>
  <button class="dsx-btn dsx-btn--secondary dsx-btn--icon dsx-btn--sm dsx-btn--flat-left" type="button">
    ✓
  </button>
</div>

Usage notes

Prefer the native grouped select when users need a single choice and the categories should remain semantic for assistive tech.
Keep each optgroup label short so the grouped structure is easy to scan in the picker.
In toolbars, pair the grouped select with .dsx-large-token and .dsx-select--small to stay aligned with existing filter chips.
Always keep a visible label or an explicit aria-label, and connect helper copy with aria-describedby in form contexts.