Input tip<mds-input-tip>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
positionenumSpecifies the position of the element relative to its container
activeactivebooleanSpecifies if the component is active and shows expanded children or not
Overview
The <mds-input-tip> web component is the floating helper container of the Magma Design System input family: it overlays an input field and carries supplementary content (slotted mds-input-tip-item chips: status labels, hints, counters) that slides into place when the field becomes active. It is a presentational compound child positioned against its parent input rather than a standalone control.
Semantic Behavior
Floating overlay: The tip floats over the parent input’s edge without intercepting interaction (pointer-events: none, which mds-input-tip-item keeps too).Active expansion: Setting active slides the tip into its expanded position; clearing it collapses the tip back flush with the input. It does not expand the items: each mds-input-tip-item shows its text only when its own expanded is set.Empty collapse: When the host has no slotted content it is hidden entirely, so an unused tip occupies no space.Default slot is content: The single default slot carries the tip’s arbitrary children; there are no named slots, events, form association, or focus management of its own.
Properties & Visual Configurations
active drives the expanded vs. collapsed state and is normally toggled by the parent input in response to focus, not set manually.position selects which edge of the input the tip anchors to and therefore the direction it expands: 'top' (default) sits on the top edge of the field, 'bottom' on the bottom edge.