Common incorrect uses of <mds-input-date>. 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 Non-ISO Date Strings

value, min, and max must be ISO 8601 date strings (YYYY-MM-DD). Any other format is passed to DateTime.fromISO, which marks the date invalid: a non-ISO value immediately trips validation, and a non-ISO min / max is silently ignored.

<!-- INCORRECT -->
<mds-input-date value="31/12/2026" max="31-12-2026"></mds-input-date>

<!-- CORRECT -->
<mds-input-date value="2026-12-31" max="2026-12-31"></mds-input-date>

Do Not Hardcode variant="error" to Signal Validation

The component manages variant automatically: it sets 'error' when validation fails and restores 'primary' when it passes. Hardcoding variant="error" shows an error before the user has done anything, does not stop the submit, and is overwritten as soon as the user touches the field.

<!-- INCORRECT -->
<mds-input-date name="dataScadenza" variant="error"></mds-input-date>

<!-- CORRECT - let validation drive variant; listen to mdsInputValidation instead -->
<mds-input-date name="dataScadenza" required></mds-input-date>

Do Not Listen to the Native change or input Events

The component emits mdsInputDateSelect (value string) and mdsInputValidation (boolean). The native change event does not cross the shadow boundary, and input misses calendar-driven picks and values set from script.

<!-- INCORRECT -->
<mds-input-date id="picker" name="data"></mds-input-date>
<script>
  document.getElementById('picker').addEventListener('change', handler);
</script>

<!-- CORRECT -->
<mds-input-date id="picker" name="data"></mds-input-date>
<script>
  document.getElementById('picker').addEventListener('mdsInputDateSelect', handler);
</script>

Do Not Use a Raw <input type="date"> as a Drop-in Replacement

Replacing <mds-input-date> with a plain <input type="date"> loses form-association conventions, theming, the calendar overlay, the contextual tip, and all Magma accessibility defaults.

<!-- INCORRECT -->
<input type="date" name="dataEvento" />

<!-- CORRECT -->
<mds-input-date name="dataEvento"></mds-input-date>

Do Not Set disabled="false" or readonly="false" to Remove the State

Boolean attributes must be absent to be 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-date name="data" disabled="false" readonly="false"></mds-input-date>

<!-- CORRECT - remove the attribute entirely -->
<mds-input-date name="data"></mds-input-date>

Do Not Pierce Shadow DOM to Style the Inner Input

The documented customization surface is --mds-input-date-* CSS custom properties plus the ::part(input-date) part. Targeting internals with >>>, /deep/, or undocumented selectors will break on any minor release.

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

/* CORRECT */
mds-input-date {
  --mds-input-date-ring: 0 0 0 2px rgb(var(--magma-danger-border) / 0.8);
}
mds-input-date::part(input-date) {
  font-size: var(--text-size-info-caption);
}

Do Not Set value to Clear the Field

Setting value="" is the correct way to clear; do not set value to a non-ISO string expecting the component to silently ignore it - it passes through validation and trips an error state.

<!-- INCORRECT (non-ISO value to "reset") -->
<mds-input-date name="data" value="clear"></mds-input-date>

<!-- CORRECT -->
<mds-input-date name="data" value=""></mds-input-date>