Common incorrect uses of <mds-input-select>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Slot Non-Option Elements

The default slot is reserved for <option> and <optgroup> elements. The component clones slot children into the inner <select>; any other element is copied verbatim and makes the native select malformed.

<!-- INCORRECT -->
<mds-input-select name="categoria">
  <div class="option-group">
    <span>Notizie</span>
    <span>Eventi</span>
  </div>
</mds-input-select>

<!-- CORRECT -->
<mds-input-select name="categoria" placeholder="Seleziona...">
  <option value="news">Notizie</option>
  <option value="eventi">Eventi</option>
</mds-input-select>

Do Not Listen to the Native change Event

<mds-input-select> wraps a shadow-DOM <select>; the native change event does not bubble out of shadow DOM reliably. Always listen to the documented mdsInputSelectChange custom event instead.

<!-- INCORRECT -->
<mds-input-select id="sel" name="tipo"></mds-input-select>
<script>
  document.getElementById('sel').addEventListener('change', (e) => {
    console.log(e.target.value); // may be undefined or stale
  });
</script>

<!-- CORRECT -->
<mds-input-select id="sel" name="tipo"></mds-input-select>
<script>
  document.getElementById('sel').addEventListener('mdsInputSelectChange', (e) => {
    console.log(e.detail.value);
  });
</script>

Do Not Use variant for Decorative Styling

variant maps to ThemeStatusVariantType (error, success, warning, info). It is meant to communicate a validation outcome, not to apply a brand color. Using a status variant to make the component visually match a section’s color theme misleads users about the control’s validation state.

<!-- INCORRECT - using 'info' just for a blue accent -->
<mds-input-select name="argomento" variant="info">
  <option value="A">Argomento A</option>
</mds-input-select>

<!-- CORRECT - set variant only to reflect real validation state -->
<mds-input-select name="argomento" variant="error" required placeholder="Obbligatorio">
  <option value="A">Argomento A</option>
</mds-input-select>

Do Not Pierce the Shadow DOM to Style the Inner <select>

The supported customization surface is the documented --mds-input-select-* CSS custom properties and the two shadow parts (select, tip-top). Targeting internal elements with >>> or undocumented selectors couples your code to the implementation and breaks on minor releases.

/* INCORRECT */
mds-input-select >>> select {
  font-size: 1rem;
  border: 2px solid red;
}

/* CORRECT */
mds-input-select {
  --mds-input-select-ring: 0 0 0 2px rgb(var(--magma-danger-emphasis));
  --mds-input-select-variant-color-rgb: var(--magma-danger-emphasis);
}
mds-input-select::part(select) {
  font-size: 1rem;
}

Do Not Set placeholder When You Need a Real Default Selection

placeholder injects an empty-value leading option that disappears from valid choices once required is set. If you want the component to open with a specific option pre-selected, use value or default-value instead.

<!-- INCORRECT - a real value supplied as placeholder text -->
<mds-input-select name="priorita" placeholder="Media">
  <option value="bassa">Bassa</option>
  <option value="media">Media</option>
  <option value="alta">Alta</option>
</mds-input-select>

<!-- CORRECT - use value to pre-select a real option -->
<mds-input-select name="priorita" value="media">
  <option value="bassa">Bassa</option>
  <option value="media">Media</option>
  <option value="alta">Alta</option>
</mds-input-select>

Do Not Replace with a Raw <select>

<mds-input-select> provides theming, accessible status tips, form-reset integration, and dark/high-contrast support. Reaching for a plain <select> bypasses all of that and breaks visual consistency across themes.

<!-- INCORRECT -->
<select name="categoria" class="form-select">
  <option value="">Seleziona...</option>
  <option value="A">Categoria A</option>
</select>

<!-- CORRECT -->
<mds-input-select name="categoria" placeholder="Seleziona...">
  <option value="A">Categoria A</option>
</mds-input-select>