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à

onautocompleteenumSpecifies a short hint that describes the expected value of the element

errorinfosuccesswarningvariantenumSets the variant of the component

autoFocusautoFocusbooleanSpecifies a short hint that describes the expected value of the element

disableddisabledbooleanIf true, the element is displayed as disabled

multiplemultiplebooleanSpecifies if the select should allow multiple options to be selected in the list

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.

defaultValuestringSpecifies the default value of the component

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

placeholderstringSpecifies a short hint that describes the expected value of the element

valuestringSpecifies the value of the component

rowsnumberThe number of option rows the list shows at once, as the size of a native <select>: with multiple, or above 1, the select shows a list box

sizenumberSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px. A number is still read as rows, the row count this prop used to set: that use is deprecated and goes in the next major

Panoramica

The <mds-input-select> web component is the Magma Design System single- and multi-choice dropdown control. It wraps a native <select> element, adding form association, accessible status feedback, and themed chrome while accepting plain <option> elements through its default slot.

Semantic Behavior

Native select wrapping: It renders a real <select> (exposed as the select part) so keyboard, type-ahead, and platform option lists work natively; the host owns theming and status only.Slotted options: The default slot accepts <option> (and <optgroup>) markup; the current selection re-syncs whenever the slotted content changes.Form association: The selection is pushed to the host form: a single select submits its value, a multiple one an entry per selected option under name, as a native select. A form reset brings back the selection of load, like a native select: the options the markup marks selected (or the placeholder), with the value of load on top. Toggling disabled removes the value from the submitted form data.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.Form validity: A required select left empty is reported to the form as a native one: it matches :invalid and stops the submit, with a message in the page language. A disabled select is left out, and novalidate on the <form> turns the check off.Value syncing: Changing the selection (by user input, the setValue() method, or the prop) emits mdsInputSelectChange with { value, values } in detail: value is the first selected option as a string, values the values of every selected option, the placeholder left out. A value set by code selects its <option> alone, as select.value does, and a value cleared by code goes back to the placeholder.Placeholder option: When placeholder is set, a leading empty-value <option> is injected as the first entry; if required is set that placeholder is disabled so it cannot be re-selected after a valid choice.Default selection fallback: With no explicit value, the options the markup marks selected become the selection; without them, the placeholder or, with no placeholder, the first option of a single select. A defaultValue seeds value at load.Status tip: A status tip surfaces verbose state - a disabled notice, and for required fields a required / required-success message that expands while the control has focus.

Properties & Visual Configurations

The variant prop applies a status appearance drawn from the shared status ladder in agents/variants.md - use it to reflect validation outcome ('error', 'success', 'warning', 'info') rather than decorative styling. This component exposes no separate tone prop. 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 arrow scale with it.

Other behavioral props

multiple turns the control into a multi-select list box: the form gets an entry per selected option and values in the mdsInputSelectChange detail lists them all, while value holds the first one, as select.value does. rows sets how many option rows are visible at once, as the size of a native <select>: above 1 it shows a list box even without multiple. A number in size, the row count it used to set, still works as rows but warns: it is deprecated and goes in the next major.defaultValue is the initial selection used to seed the value at load (notably for the React wrapper), distinct from the live value that reflects the current choice.required both enforces a non-empty submission and locks the placeholder option so the empty entry cannot be chosen again.

Dipendenze

Usa: mds-icon, mds-input-tip, mds-input-tip-item