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 input stands on its own. The placeholder is deliberately not a fallback: it disappears as soon as the field is filled.

autocomplete - additional-name | address | address-level1 | address-level2 | address-level3 | address-level4 | address-line1 | address-line2 | address-line3 | bday | bday-day | bday-month | bday-year | cc-additional-name | cc-csc | cc-exp | cc-exp-month | cc-exp-year | cc-family-name | cc-given-name | cc-name | cc-number | cc-type | country | country-name | current-password | email | family-name | given-name | honorific-prefix | honorific-suffix | impp | language | name | new-password | nickname | off | on | one-time-code | organization | organization-title | photo | postal-code | sex | street-address | tel | tel-area-code | tel-country-code | tel-extension | tel-local | tel-national | transaction-amount | transaction-currency | url | username | undefinedoffSpecifies whether the element should have autocomplete enabled

autofocus - booleanfalseSpecifies that the element should automatically get focus when the page loads

await - booleanfalseSpecifies if the spinner icon is shown, replacing the icon if present

controlsIconcontrols-iconarithmetic | arrow | undefinedarrowSpecifies the icon type of the counter button when the input type is set to number

controlsLayoutcontrols-layouthorizontal | vertical | undefinedverticalSpecifies the layout of the counter button when the input type is set to number

dataliststring[] | undefinedA list of search terms to be searched from the input field, it should be used with type=“search” input.

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

icon - string | undefinedAn icon displayed at the right of the input

max - number | string | undefinedSpecifies the maximum value use it with input type=“number” or type=“date” Example: max=“180”, max=“2046-12-04”

maxlength - number | undefinedSpecifies the maximum number of characters allowed in an element. Use it with input type=“text”. If maxlength is set to 0 or a negative number it will be considered as undefined.

mic - boolean | undefinedToggles text recognition

min - number | string | undefinedSpecifies the minimum value use it with input type=“number” or type=“date” Example: min=“-3”, min=“1988-04-15”

minlength - number | undefinedSpecifies the minimum number of characters allowed in an element use it with input type=“number”

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

pattern - string | undefinedSpecifies a regular expression the whole value has to match, as the pattern attribute of a native input: a value that does not match stops the submit of the form

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

readonly - boolean | undefinedfalseSpecifies that the element is read-only

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

size - lg | md | sm | undefinedlgSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px. A textarea keeps its own height (--mds-input-textarea-min-height)

step - string | undefinedSpecifies the interval between legal numbers in an input field

tip - string | undefinedSets the word(s) of the tip of the input field

type - cc | cf | date | email | isbn | number | password | piva | search | tel | text | textarea | time | url | undefinedtextSpecifies the type of input element

typography - detail | snippetdetailSpecifies the typography of input element

value - stringSpecifies the value of the input element

variant - ai | error | info | primary | success | warning | undefinedprimarySets the variant of the input field

Events

mdsInputBlurvoidEmits a void event when input element is blurred

mdsInputChangeMdsInputEventDetailEmits an InputChangeEventDetail when the value of the input element changes

mdsInputFocusvoidEmits a void event when input element is focused

mdsInputKeydownKeyboardEventEmits a KeyboardEvent when a keyboard key is pressed on the focused input element

mdsInputSpeechEndvoidEmits a void event when input speech recognition ends

mdsInputValidationbooleanEmits a boolean event when a input execute validation

Methods

addValidatoraddValidator(validator: MdsValidatorFn) => Promise<void>Adds a validator to the input.

getErrorsgetErrors() => Promise<MdsValidationErrors | null>Returns the current validation errors, or null if the value is valid.

getInputElementgetInputElement() => Promise<HTMLInputElement | HTMLTextAreaElement>Returns the native <input> element used under the hood.

hasValidatorhasValidator(validator?: MdsValidatorFn) => Promise<boolean>Returns if validator is presen

removeValidatorremoveValidator(validator: MdsValidatorFn) => Promise<void>Removes a previously added validator from the input.

setFocussetFocus() => Promise<void>Sets focus on the specified my-input. Use this method instead of the global input.focus().