Common incorrect uses of <mds-input-date-range-preselection>. 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 Outside <mds-input-date-range>

The component only works as a direct child of <mds-input-date-range>. Used standalone it renders an inert button because closest('mds-input-date-range') returns null and the click handler does nothing.

<!-- INCORRECT -->
<mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
  Questo mese
</mds-input-date-range-preselection>

<!-- CORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Set selected Manually to Drive Selection

selected is a read-only output attribute managed entirely by the parent. Setting it by hand does not apply the range, does not clear sibling active states, and will be overwritten by the parent on the next range change.

<!-- INCORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30" selected>
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

<!-- CORRECT: set the range on the parent; it marks the matching preset when the range changes -->
<mds-input-date-range name="periodo" start-date="2025-06-01" end-date="2025-06-30">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Set selected as a Boolean String

selected is a boolean attribute: remove it to deselect the item - but again, prefer letting the parent control it. A string value is fragile: "false" is read as false on this component, but the attribute stays on the element until the component renders (attribute selectors and scripts reading it see it set). Never write a boolean as a string.

<!-- INCORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30" selected="false">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

<!-- CORRECT: remove the attribute entirely -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Use HTML in the Default Slot

The default slot is the plain-text label read by the internal <mds-button>. Placing HTML elements inside it breaks button layout and may be stripped by the shadow DOM projection.

<!-- INCORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    <strong>Questo mese</strong>
    <small>(giu)</small>
  </mds-input-date-range-preselection>
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese (giu)
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Provide Only the end Date Without start

start is a required prop; omitting it leaves the component without a valid range anchor and the parent cannot apply any preselection. end is optional and meaningful only together with start.

<!-- INCORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection end="2025-06-30">
    Fine mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Customize via Undocumented Shadow Parts or Internal Selectors

The only supported customization surface is the --mds-date-range-preselection-* CSS custom properties for the three visual states. Targeting the inner mds-button or its shadow internals couples your code to implementation details that can change without notice.

/* INCORRECT */
mds-input-date-range-preselection .action {
  background: blue;
}
mds-input-date-range-preselection::part(button) {
  border-radius: 0;
}

/* CORRECT */
mds-input-date-range-preselection {
  --mds-date-range-preselection-default-background: rgb(var(--magma-wash-strong) / 0.1);
  --mds-date-range-preselection-selected-background: rgb(var(--magma-accent-emphasis-hover));
}