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 code: each digit is announced as a position inside it, the fields being separate controls a screen reader reaches one at a time.

autosubmit - booleanfalseAutomatically submits the form when the OTP code is complete

disabled - boolean | undefinedfalseDisables every cell of the code, like a disabled native input: the code cannot be changed and is left out of the form. A disabled <fieldset> around the component does the same.

length - number6Number of digits in the OTP code

value - string | undefinedThe current value of the OTP code: a value set in the markup or by code fills the cells from the first one