Select

Native <select> with custom styling. Reuses Input component patterns for form consistency.

---

Classes

Class	Purpose
.select	Base native select with appearance reset + custom chevron
.select--sm	Small size
.select--md	Medium size
.select--lg	Large size
.select--error	Error state border
.select--placeholder	Placeholder text color

Reuses .input-field, .input-label, .input-help, .input-error for form layout.

---

Variants

Basic

<div class="input-field" style="max-width: 360px">
  <label class="input-label" for="preview-region">Region <span class="input-label__required">*</span></label>
  <select id="preview-region" class="select select--md" required>
    <option value="" disabled selected>Vælg...</option>
    <option value="hovedstaden">Hovedstaden</option>
    <option value="midtjylland">Midtjylland</option>
    <option value="nordjylland">Nordjylland</option>
    <option value="sjaelland">Sjælland</option>
    <option value="syddanmark">Syddanmark</option>
  </select>
</div>

Region * Vælg... Hovedstaden Midtjylland Nordjylland Sjælland Syddanmark

With error

<div class="input-field" style="max-width: 360px">
  <label class="input-label" for="preview-err-sel">Region</label>
  <p id="preview-err-sel-desc" class="input-error" role="alert">Du skal vælge en region</p>
  <select id="preview-err-sel" class="select select--md select--error" aria-invalid="true" aria-describedby="preview-err-sel-desc" required>
    <option value="" disabled selected>Vælg...</option>
    <option value="hovedstaden">Hovedstaden</option>
    <option value="midtjylland">Midtjylland</option>
  </select>
</div>

Region

Du skal vælge en region

Vælg... Hovedstaden Midtjylland

Sizes

<div class="flex flex-col gap-2" style="max-width: 360px">
  <select class="select select--sm">
    <option value="" disabled selected>Small</option>
    <option>Option A</option>
  </select>
  <select class="select select--md">
    <option value="" disabled selected>Medium</option>
    <option>Option A</option>
  </select>
  <select class="select select--lg">
    <option value="" disabled selected>Large</option>
    <option>Option A</option>
  </select>
</div>

Small Option A Medium Option A Large Option A

---

Usage

<div class="input-field">
  <label class="input-label" for="region">Region <span class="input-label__required">*</span></label>
  <select id="region" class="select select--md" required>
    <option value="" disabled selected>Vælg...</option>
    <option value="hovedstaden">Hovedstaden</option>
    <option value="midtjylland">Midtjylland</option>
    <option value="sjaelland">Sjælland</option>
  </select>
</div>

Grouped

<select class="select select--md">
  <option value="" disabled selected>Vælg land...</option>
  <optgroup label="Norden">
    <option value="dk">Danmark</option>
    <option value="se">Sverige</option>
  </optgroup>
  <optgroup label="Baltikum">
    <option value="ee">Estland</option>
  </optgroup>
</select>

---

Accessibility

• Native <select> provides keyboard and screen reader support
• Always associate with <label> via for/id
• Use aria-invalid and aria-describedby for error states
• Grey out unavailable options with disabled — never remove them
• Avoid dependent dropdowns where one select changes another's options

---

Best practices

Do:

• Use only for 5–15 options where space is limited
• Keep option text short and consistent
• Pre-select the most common value when known
• Use a submit button — don't react to selection change immediately

Don't:

• Use for fewer than 5 options — show radio buttons
• Use for more than 15 options — use autocomplete
• Use for navigation between pages
• Remove unavailable options — grey them out instead
• Create dependent dropdowns that affect each other