Magma components are web components: custom elements you write like HTML tags, with any framework or without one. Props configure them, events tell you what happened, methods are functions you call on the element and slots take the content you put inside it.

Props

Set a prop as an HTML attribute in the markup, or as a property from JavaScript. The Attribute column gives the name of the attribute, a dash when it is the same as the property; props without one, such as arrays and functions, are set from JavaScript only. To turn a boolean attribute off, remove it: never write disabled="false".accessibleNamearia-labelstring | undefinedThe 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.

autoFocusauto-focusboolean | undefinedSpecifies a short hint that describes the expected value of the element

autocomplete - on | undefinedSpecifies a short hint that describes the expected value of the element

defaultValuedefault-valuenull | number | string | undefinedSpecifies the default value of the component

disabled - boolean | undefinedfalseIf true, the element is displayed as disabled

multiple - boolean | undefinedfalseSpecifies if the select should allow multiple options to be selected in the list

name - string | undefinedIs needed to reference the form data after the form is submitted

placeholder - string | undefinedSpecifies a short hint that describes the expected value of the element

required - boolean | undefinedfalseSpecifies that the element must be filled out before submitting the form

rows - number | undefined0The 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

size - lg | md | sm | number | undefinedlgSpecifies 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

value - null | number | string | undefinedSpecifies the value of the component

variant - error | info | success | warning | undefinedSets the variant of the component

Events

mdsInputSelectChangeMdsInputSelectEventDetailEmits when the selection changes: value is the first selected option, values every selected one

Methods

setValuesetValue(value: string | number | null) => Promise<void>Sets the value of the component

Slots

Slots take the content you write between the tags of the component. The default slot, the one without a name, accepts plain text, unless its description says otherwise.(default)Add option HTML elements or components to this slot.

No slot name