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".autofocus - booleanSets or returns whether a checkbox should automatically get focus when the page loads

checked - boolean | undefinedSpecifies that an <input> element should be pre-selected when the page loads (for type=“checkbox” or type=“radio”)

disabled - boolean | undefinedSets or returns whether a checkbox is disabled, or not

explicit - boolean | undefinedSets if the type switch mode shows explicit icons

icon - stringThe checked icon displayed

indeterminate - boolean | undefinedSets or returns the indeterminate state of the checkbox

name - stringSpecifies the name of an <input> element

size - lg | md | smmdSpecifies the size for the switch toggle, it works only if attribute ‘type’ is set to ‘switch’

type - checkbox | radio | switchswitchSpecifies switch type: switch (default), checkbox and radio

typography - caption | detail | label | option | paragraph | tip | undefineddetailSpecifies the font typography of the element

value - string | undefinedSpecifies the value of the input element

variant - code | info | read | title | undefinedSpecifies the variant for typography

Events

mdsInputSwitchChangeMdsInputSwitchEventDetailEmits when the value changes

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)Put text string or elements here

No slot name