Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

lgmdsmsizeenumSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px

aierrorinfoprimarysuccesswarningvariantenumSets the variant of the input field

disableddisabledbooleanIf true, the element is displayed as disabled

hideTodayhideTodaybooleanHides the highlight on today's date in the calendar.

readonlyreadonlybooleanSpecifies that the element is read-only

requiredrequiredbooleanSpecifies that the element must be filled out before submitting the form

accessibleNamestringThe accessible name of the native control: the label a screen reader announces. An mds-input-field around the component passes its own label down here, so the attribute is only written by hand when the control stands on its own. The placeholder is deliberately not a fallback: it disappears as soon as the field is filled.

maxstringSpecifies the max date of the range, user cannot set dates after this date

minstringSpecifies the min date of the range, user cannot set dates before this date

namestringIs needed to reference the form data after the form is submitted

valuestringSpecifies the value of the input

delaynumberSpecifies the delay in milliseconds before closing the calendar dropdown, if the value is 0 the dropdown will not close

Panoramica

The <mds-input-date> web component is the Magma Design System control for capturing a single calendar date. It wraps a native <input type="date">, adding form association, ISO value validation against an optional min/max range, contextual tips, and a button-triggered calendar dropdown for visual date picking.

Semantic Behavior

Form association: The host participates natively in form submission and exposes its value under name; a form reset brings back the date the field had at load, both shown and submitted, and its pristine look, like a native input. An invalid value submits nothing, and its invalid state is reported to the form: like a native control, the field matches :invalid and stops the submit, with a message in the page language (a missing required date, a date out of the range, an unreadable one). A disabled or read-only field is left out, and novalidate on the <form> turns the check off.Disabled fieldset: A disabled <fieldset> around the component disables it as disabled does, like a native control: it cannot be changed and its value is left out of the form, until the fieldset is enabled.ISO value contract: value, min, and max are all ISO date strings (YYYY-MM-DD); other formats are not accepted.Validation on change: The value is checked when the component loads, on every value change and whenever required, min or max change (also after load, as with the React wrappers under SSR). The validity reported to the form, the submitted value and the required tip follow every check: a date invalid, missing while required or outside the min/max range submits no value. The look follows once the field is touched, like :user-invalid on a native control: after the user edits or leaves the field, picks a date from the calendar, or a stopped submit points at it, each check sets variant to 'error' or 'primary' and emits mdsInputValidation with a boolean. An empty required field therefore loads in its own variant, not in 'error'.Range self-correction: If max is earlier than min, at load or after a later change of either, max is snapped to equal min.Selection event: mdsInputDateSelect fires with the new string value whenever value changes, whether typed or picked from the calendar.Calendar dropdown: The trailing calendar button, icon-only and named in the page language (the lang of <html>) (“Open calendar”), opens a single-date calendar; picking a day writes back the value and, after delay, auto-closes.Slotted mode: When the host carries a slot attribute it is treated as embedded - the calendar button, dropdown, and calendar are not rendered, leaving only the bare input for composition inside a larger field.Contextual tips: A tip surfaces disabled, readonly, and required states; the required tip expands on focus and reflects success once the value is valid.Read-only: A read-only field shows its tip and auto-selects its text on focus; its native input is read-only and its calendar button disabled, so the value cannot be changed.

Properties & Visual Configurations

The shared variant ladder is defined in agents/variants.md. Note that variant is mutable here: once the field is touched, the component overrides it to 'error' / 'primary' as validation dictates, so a variant set in the markup or from script lasts until the user edits or leaves the field. size sets the height of the field, the same as <mds-button>: sm 28px, md 36px, lg 48px (default). Match it to the buttons next to the field, or go smaller in dense layouts (filter bars, table toolbars); the text style stays the same, the padding and the inner calendar button scale with it.

Other behavioral props

min / max bound the selectable range; dates outside it invalidate the field rather than being silently clamped.delay is the milliseconds to wait before auto-closing the calendar dropdown after a pick; setting it to 0 keeps the dropdown open.required makes an empty or invalid value fail validation and drives the required/required-success tip.

Dipendenze

Usa: mds-button, mds-input-tip, mds-input-tip-item, mds-dropdown, mds-calendar