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.

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

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

hideTodayhide-todaybooleanfalseHides the highlight on today’s date in the calendar.

max - null | stringnullSpecifies the max date of the range, user cannot set dates after this date

min - null | stringnullSpecifies the min date of the range, user cannot set dates before this date

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

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

value - stringSpecifies the value of the input

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

Events

mdsInputDateSelectstringEmitted when the selected date value changes.

mdsInputValidationbooleanEmits a boolean event when a input execute validation

Methods

focusInputfocusInput() => Promise<void>Sets focus on the underlying input element.

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

setValuesetValue(value: string) => Promise<void>Sets the input value.