Input field<mds-input-field>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
variantenumDisplay the variant of a message at the bottom of the input text field
labelstringDisplay a text on the top of the input text field
messagestringDisplay a message at the bottom of the input text field
Overview
The <mds-input-field> web component is the form-field wrapper of the Magma Design System. It does not render an input itself; instead it decorates a slotted <mds-input> (or similar control) with a top label and a bottom message area, and reacts to the control’s validation lifecycle. It plays the role the native <label> + helper-text grouping plays around an <input>.
Semantic Behavior
Compound parent: The interactive control is supplied through the default slot; the field is not used standalone. Validation is wired to the first slotted element; with an empty slot the field only logs a console warning at load.Form association: The field participates in the surrounding <form> through the control it wraps, requiring no extra wiring.Validation-driven state: It listens for the slotted control’s mdsInputValidation event. When the control reports errors it switches variant to 'error' and shows the joined error strings in message; otherwise it sets variant to 'success' and clears message.Message rendering: message is split on ; and each segment is rendered as a separate caption line, so multiple validation messages stack vertically.
Properties & Visual Configurations
message is the helper/error text shown under the control. It is author-set initially but is overwritten by the validation cycle once the slotted control emits validation (replaced by the errors, or cleared when there are none), so a manually set message persists only until the first validation.variant drives the field’s status colouring. It is not the full theme ladder: the allowed set is the input-specific variant ladder ('ai', 'primary', plus the status values 'error', 'info', 'success', 'warning'), drawn from the families in agents/variants.md. It defaults to 'primary' and is normally managed automatically by validation rather than set by hand.