@hydrogen-design-system/system/dist/import/latest/components/forms/markup/html/select.html

Hydrogen's full design system and component library.

<div data-h2-form-item="select">
  <div data-h2-input-title-wrapper>
    <div data-h2-input-label-wrapper>
      <label
        data-h2-input-label 
        for="selectInput">Select Input Label</label>
    </div>
    <div data-h2-input-data-wrapper>
      <span data-h2-input-required>(Required)</span><span data-h2-input-optional>(Optional)</span><span data-h2-input-data>Supplementary Info</span>
    </div>
  </div>
  <div data-h2-input-wrapper>
    <span data-h2-input-select-icon>▼</span>
    <select
      data-h2-input
      id="selectInput" 
      required>
      <option disabled selected hidden>Select an option...</option>
      <option>Option 01</option>
      <option>Option 02</option>
      <option>Option 03</option>
      <option>Option 04</option>
      <option>Option 05</option>
    </select>
  </div>
  <div data-h2-input-context-wrapper>
    <div data-h2-input-error-wrapper>
      <span data-h2-input-error>Custom error text.</span>
    </div>
    <div data-h2-input-info-trigger-wrapper>
      <button
        aria-expanded="false"
        data-h2-input-info-trigger
        type="button">
        <span data-h2-input-info-trigger-more-label>More</span><span data-h2-input-info-trigger-less-label>Less</span> Info
        <span data-h2-input-info-trigger-label>Click to view...</span>
      </button>
    </div>
  </div>
  <div 
    aria-hidden="true"
    data-h2-input-info-wrapper>
    <p data-h2-focus>Explain why this field is collected.</p>
  </div>
</div>