kit

Select

A native select, styled to sit beside text fields, that opens the platform's own picker so it works everywhere.

Tier 1 · CSS only Native select preview

Example

Hint text below the control.

Show the markup 
<div class="demo-form">
  <div class="kit-field">
    <label for="sel-a">Label</label>
    <select class="kit-select" id="sel-a"><option>Option one</option><option>Option two</option><option>Option three</option></select>
  </div>
  <div class="kit-field">
    <label for="sel-b">With a placeholder</label>
    <select class="kit-select" id="sel-b" required aria-describedby="sel-b-hint"><option value="" disabled selected>Choose an option</option><option>Option one</option><option>Option two</option></select>
    <p class="kit-field-hint" id="sel-b-hint">Hint text below the control.</p>
  </div>
  <div class="kit-field">
    <label for="sel-c">Grouped</label>
    <select class="kit-select" id="sel-c"><optgroup label="Group one"><option>Option one</option><option>Option two</option></optgroup><optgroup label="Group two"><option>Option three</option></optgroup></select>
  </div>
  <div class="kit-field">
    <label for="sel-d">Disabled</label>
    <select class="kit-select" id="sel-d" disabled><option>Option one</option></select>
  </div>
</div>

Usage

<div class="kit-field">
  <label for="region">Data region</label>
  <select class="kit-select" id="region">
    <option>Europe (London)</option>
    <option>US East (Virginia)</option>
  </select>
</div>

Use a select for a single choice from about five to fifteen options. Fewer: a radio group or a segmented control, so every option is visible. Many more, or options worth searching: the combobox (coming later).

Group long lists with <optgroup>. aria-invalid, disabled and multiple work as they do on a text field.

Accessibility

  • It's the native element: keyboard, screen reader and touch behaviour are the platform's own, and phones show their native picker.
  • A placeholder option ("Choose a region") is a real, disabled, selected option with an empty value, so a required select still validates.
  • The chevron is a background image; in forced-colours mode the browser's own arrow returns.