Common incorrect uses of <mds-input>. 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 a Raw <input> When <mds-input> Exists

Reaching for a plain <input> bypasses theming, validation, tips, accessible state announcements, and form-reset behavior provided by the component.

<!-- INCORRECT -->
<input type="text" name="nome" placeholder="Nome" class="my-input">

<!-- CORRECT -->
<mds-input name="nome" type="text" placeholder="Nome"></mds-input>

Do Not Set Boolean Attributes to the String "false"

disabled, required, readonly, mic and await are boolean attributes: remove the attribute entirely to turn it off. The runtime happens to read the string "false" as false, but the attribute stays in the markup until the component renders, and HTML, the browser’s own handling of disabled on a form-associated element, attribute selectors and hasAttribute() all read a present attribute as set.

<!-- INCORRECT -->
<mds-input name="note" disabled="false" required="false"></mds-input>

<!-- CORRECT -->
<mds-input name="note"></mds-input>

Do Not Force variant for Validation Feedback

The component drives variant to 'success' or 'error' automatically on blur when validators are active. Setting variant manually overrides the feedback and breaks the visual contract.

<!-- INCORRECT -->
<mds-input name="codice" variant="error" tip="Valore non valido"></mds-input>

<!-- CORRECT -->
<mds-input name="codice" required tip="Inserisci un valore valido"></mds-input>

Do Not Listen to Native input or change Events

The native change event does not cross the shadow boundary, and input reports only typing, not the values set by the steppers, the dictation or a script. Use the documented mdsInputChange event instead, which fires for every value change.

// INCORRECT
document.querySelector('mds-input').addEventListener('input', (e) => {
  console.log(e.target.value);
});

// CORRECT
document.querySelector('mds-input').addEventListener('mdsInputChange', (e) => {
  console.log(e.detail.value);
});

Do Not Use type="number" Native Browser Spinners and Then Override the Input

The component renders its own increment/decrement buttons and hides the native browser spinners. Do not try to re-enable them via CSS, and do not add inline JS stepUp/stepDown calls - use the controlsLayout and controlsIcon props to configure the built-in controls.

<!-- INCORRECT -->
<mds-input type="number" style="-moz-appearance: auto;"></mds-input>

<!-- CORRECT -->
<mds-input
  type="number"
  controls-layout="horizontal"
  controls-icon="arithmetic"
  min="0"
  max="100"
></mds-input>

Do Not Use a Legacy or Invalid type Value

<mds-input> accepts a specific set of type values: text, email, number, password, search, tel, url, date, time, textarea, cf, piva, cc, isbn. Supplying anything else (e.g. "checkbox", "radio", "file") is passed straight to the inner native <input>, which renders a bare native control that the component neither styles nor reports correctly to the form. Use the dedicated Magma component for those controls.

<!-- INCORRECT -->
<mds-input type="checkbox" name="accetto"></mds-input>
<mds-input type="file"     name="allegato"></mds-input>

<!-- CORRECT -->
<mds-input-switch name="accetto"></mds-input-switch>
<mds-input-upload name="allegato"></mds-input-upload>

Do Not Use placeholder as the Accessible Label

placeholder disappears on input and is never read as a label by assistive tech. Always pair <mds-input> with mds-input-field (which shows a visible label and passes it down as the accessible name) or supply aria-label directly on the host.

<!-- INCORRECT -->
<mds-input name="ricerca" placeholder="Cerca per nome"></mds-input>

<!-- CORRECT -->
<mds-input-field label="Cerca per nome">
  <mds-input name="ricerca" placeholder="Cerca per nome"></mds-input>
</mds-input-field>

Do Not Pierce the Shadow DOM to Style Internal Parts

The supported customization surface is --mds-input-* CSS custom properties plus the documented shadow parts (field, tip-top, tip-bottom, tip-count, password-toggle-button, counter-button-increase, counter-button-decrease, mic-toggle-button). Targeting undocumented internals via >>> or arbitrary class names couples your code to the Shadow DOM implementation.

/* INCORRECT */
mds-input >>> .input {
  border: 2px solid red;
}

/* CORRECT */
mds-input {
  --mds-input-ring: 0 0 0 2px rgb(var(--magma-danger-border));
  --mds-input-background: rgb(var(--magma-danger-wash-base));
}
mds-input::part(field) {
  font-style: italic;
}