v134 · forms

Form Integration

A complete bug-report form with three customizable <select> fields — category, priority (coloured dots), and severity — showing that appearance: base-select selects participate in HTML form validation, constraint API, and FormData exactly like native selects.

Feature detection: checking…
✓ Form submitted successfully! Values captured via FormData — see summary below.
Bug Report
Title is required
Valid email required
Category is required
Severity is required
Priority is required
Optional — best guess 
/* Opt into the customizable base appearance */
select {
  appearance: base-select;
  border: 2px solid var(--border-black);
  font-family: var(--font-mono);
}

/* Style the picker dropdown */
select::picker(select) {
  border: 2px solid var(--border-black);
  border-radius: 0;
  background: var(--bg-ivory);
}

/* Custom option markup (option can contain HTML) */
option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
}

/* Form API is unchanged — select.value, FormData, required, validation */
const data = new FormData(form);
data.get('priority');  // → "p1"

see also