Correct and idiomatic ways to use the <mds-input-tip> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md. <mds-input-tip> is an internal compound child used inside mds-input, mds-input-date, and mds-input-select. It is not meant for standalone use. The patterns below show what the parent components render internally, which is useful when building a custom input wrapper that needs the same behavior.

Status Chips Above the Field (position=“top”)

Position the tip above the input with position="top" (the default). Slot mds-input-tip-item children for each status badge to show. The active prop slides the tip into its expanded position when the field is focused; each item shows its label only when its own expanded is set, which the parent inputs set together with active.

<div style="position: relative;">
  <mds-input-tip position="top" active>
    <mds-input-tip-item variant="required" expanded></mds-input-tip-item>
  </mds-input-tip>
  <input type="text" placeholder="Campo obbligatorio" />
</div>

Hint and Counter Below the Field (position=“bottom”)

Use position="bottom" to anchor the tip below the input. This is the canonical placement for inline helper text and character-count feedback.

<div style="position: relative;">
  <mds-input-tip position="bottom" active>
    <mds-input-tip-item variant="text" expanded>
      Inserisci almeno 8 caratteri
    </mds-input-tip-item>
    <mds-input-tip-item variant="count-incomplete" expanded>
      3 / 8
    </mds-input-tip-item>
  </mds-input-tip>
  <input type="text" />
</div>

Toggling the Active State on Focus

Drive active, and the expanded of the items that should open on focus, from a focus/blur handler to animate the tip in and out. Setting active slides the tip; removing it (or leaving it unset) collapses it back flush with the input edge.

<div style="position: relative;" id="wrapper">
  <mds-input-tip position="top" id="tip">
    <mds-input-tip-item variant="required"></mds-input-tip-item>
  </mds-input-tip>
  <input
    type="text"
    id="field"
    placeholder="Nome utente"
  />
</div>

<script>
  const field = document.getElementById('field');
  const tip   = document.getElementById('tip');
  const item  = tip.querySelector('mds-input-tip-item');
  field.addEventListener('focus', () => { tip.active = true; item.expanded = true; });
  field.addEventListener('blur',  () => { tip.active = undefined; item.expanded = undefined; });
</script>

Disabled and Read-only State Chips

When the parent input is disabled or read-only, pass the matching variant to show a system-translated label. The expanded prop on the item keeps it permanently visible even without focus.

<div style="position: relative;">
  <mds-input-tip position="top">
    <mds-input-tip-item variant="disabled" expanded></mds-input-tip-item>
  </mds-input-tip>
  <input type="text" disabled placeholder="Campo disabilitato" />
</div>

Required-field Success Feedback

Switch the <mds-input-tip-item> variant to required-success once the field passes validation. The item renders a checkmark icon instead of the “obbligatorio” label.

<div style="position: relative;">
  <mds-input-tip position="top" active>
    <mds-input-tip-item variant="required-success" expanded></mds-input-tip-item>
  </mds-input-tip>
  <input type="text" value="Valore valido" />
</div>

Multiple Tip Items in One Container

Slot several <mds-input-tip-item> elements inside a single <mds-input-tip>. The container lays them out in a row and hides itself automatically when it has no children.

<div style="position: relative;">
  <mds-input-tip position="bottom" active>
    <mds-input-tip-item variant="text" expanded>
      Solo lettere e numeri
    </mds-input-tip-item>
    <mds-input-tip-item variant="count-almost" expanded>
      18 / 20
    </mds-input-tip-item>
  </mds-input-tip>
  <input type="text" />
</div>

CSS Customization

Style the tip only through the documented --mds-input-tip-* CSS custom properties. Set them on the host or a parent selector; use the semantic color roles via rgb(var(--magma-<role>)) (agents/color.md) so dark mode keeps working.

.custom-input-wrapper mds-input-tip {
  --mds-input-tip-background: rgb(var(--magma-surface-inverse));
  --mds-input-tip-vertical-offset: calc(var(--spacing) * 200);
  --mds-input-tip-horizontal-offset: calc(var(--spacing) * 300);
  --mds-input-tip-horizontal-offset-focused: 4px;
}