Common incorrect uses of <mds-input-field>. 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 Use It Without a Slotted Input

<mds-input-field> requires a slotted input element. With an empty slot it only logs a console warning at load and has no control to label or validate. Always slot an mds-input as the first child.

<!-- INCORRECT -->
<mds-input-field label="Nome"></mds-input-field>

<!-- CORRECT -->
<mds-input-field label="Nome">
  <mds-input name="firstName" placeholder="Es: Mario"></mds-input>
</mds-input-field>

Do Not Use a Native <input> in the Slot

The component binds to mdsInputValidation, which only the Magma inputs (<mds-input>, <mds-input-date>) emit. Slotting a raw <input> skips the validation lifecycle entirely - the field will never switch to error or success.

<!-- INCORRECT -->
<mds-input-field label="Email">
  <input type="email" name="email" required>
</mds-input-field>

<!-- CORRECT -->
<mds-input-field label="Email">
  <mds-input type="email" name="email" required></mds-input>
</mds-input-field>

Do Not Manage variant and message Manually During Validation

variant and message are mutable and will be overwritten by the validation cycle the moment the slotted control emits mdsInputValidation. Trying to manage them via script in parallel leads to race conditions. Set validation attributes on <mds-input> and let the field drive state automatically.

<!-- INCORRECT -->
<mds-input-field id="nameField" label="Nome">
  <mds-input name="firstName" required></mds-input>
</mds-input-field>
<script>
  document.getElementById('nameField').variant = 'error';
  document.getElementById('nameField').message = 'Campo obbligatorio';
</script>

<!-- CORRECT -->
<mds-input-field label="Nome">
  <mds-input name="firstName" required></mds-input>
</mds-input-field>

Do Not Listen for Native change or input Events to Detect Validation

Native DOM events (change, input) do not carry validation state and may not bubble out of shadow DOM as expected. Listen for the documented mdsInputValidation event on the slotted <mds-input> if you need to react to validation results in your own code.

<!-- INCORRECT -->
<mds-input-field label="Codice fiscale">
  <mds-input id="cfInput" name="cf" type="cf" required></mds-input>
</mds-input-field>
<script>
  document.getElementById('cfInput').addEventListener('change', handleChange);
</script>

<!-- CORRECT -->
<mds-input-field label="Codice fiscale">
  <mds-input id="cfInput" name="cf" type="cf" required></mds-input>
</mds-input-field>
<script>
  document.getElementById('cfInput').addEventListener('mdsInputValidation', handleValidation);
</script>

Do Not Apply an Invalid variant Value

<mds-input-field> uses ThemeInputVariantType, which only accepts 'ai', 'primary', 'error', 'info', 'success', and 'warning'. Values from the broader variant ladder (e.g. 'secondary', 'dark') silently fall back to the default and produce no coloring change.

<!-- INCORRECT (variant from the full theme ladder) -->
<mds-input-field label="Stato" variant="secondary" message="Valore non valido">
  <mds-input name="stato"></mds-input>
</mds-input-field>

<!-- CORRECT -->
<mds-input-field label="Stato" variant="warning" message="Valore non valido">
  <mds-input name="stato"></mds-input>
</mds-input-field>

Do Not Pierce the Shadow DOM to Style the Message Area

The only supported customization surface is --mds-input-field-message-color and --mds-input-field-message-background, plus the content shadow part. Targeting internal elements via >>> or undocumented class names couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-input-field >>> .message {
  color: red;
}

/* CORRECT */
mds-input-field {
  --mds-input-field-message-color: rgb(var(--magma-danger-text-muted));
  --mds-input-field-message-background: rgb(var(--magma-danger-wash-base));
}