Input tip item<mds-input-tip-item>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
variantenumSpecifies the variant of the element
expandedexpandedbooleanSpecifies if the element is expanded
Overview
The <mds-input-tip-item> web component is a single contextual hint row rendered inside the <mds-input-tip> container. It represents one validation/status message of a form field (required, read-only, disabled, character count, or free text) and is orchestrated by the input components (<mds-input>, <mds-input-date>, <mds-input-select>) that own the tip; it has no standalone HTML equivalent.
Semantic Behavior
Compound child only: It must be a direct slot child of <mds-input-tip> and is not used standalone; the host input decides which items exist and toggles their expanded state.Variant drives the entire render: The variant is not a style modifier but a content switch - each value produces a different body (slotted text, a localized status label, or the done success icon), so changing variant changes what the item shows, not just how it looks.Self-localized labels: For required, readonly, and disabled the visible text comes from the component’s own i18n dictionary (en/it/es/el); these variants ignore slotted content. text and the count-* variants instead render the default slot provided by the parent.Expanded toggling: expanded is driven by the parent (often bound to the field’s focus state).No interactivity: It carries no role, ARIA state, focus handling, or emitted events - it is a passive display row whose state is fully driven from above.
Properties & Visual Configurations
variant is the only meaningful prop and selects both the message type and its source of text. Use required / required-success for required-field feedback (the success value swaps the label for a checkmark icon), readonly and disabled for field-state notices (auto-labeled from the dictionary), text for an arbitrary slotted hint, and the count-* family (count-empty, count-incomplete, count-almost, count-almost-full, count-full) for character-count feedback whose label text is slotted in by the parent. The full enumerated list lives in AGENTS.md.expanded controls the expansion within the tip (collapsed, the item shrinks to a small colored dot without text) and is intended to be driven by the parent rather than set by hand.Styling hooks (--mds-input-tip-item-background, --mds-input-tip-item-color, --mds-input-tip-item-icon-color) are documented in AGENTS.md.