Correct and idiomatic ways to use the <mds-input-otp> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Default Six-Digit Code

The component renders six single-digit cells by default. Drop it into a form with a name attribute so the concatenated value is submitted as a named field.

<form action="/verify" method="post">
  <mds-input-otp name="otp"></mds-input-otp>
  <mds-button type="submit" label="Verifica" variant="primary" tone="strong"></mds-button>
</form>

Custom Code Length

Set length to match the expected OTP length - 4 digits for a short PIN, 8 for a longer token.

<!-- Four-digit PIN -->
<mds-input-otp name="pin" length="4"></mds-input-otp>

<!-- Eight-digit token -->
<mds-input-otp name="token" length="8"></mds-input-otp>

Auto-Submit on Completion

Add the autosubmit boolean attribute when the OTP is the only field and no explicit confirm button is needed. The owning form is submitted when a digit typed in the last cell completes the code (a paste does not trigger it) - do not set autosubmit="false" to disable it; remove the attribute instead.

<form action="/verify" method="post">
  <mds-input-otp name="otp" autosubmit></mds-input-otp>
</form>

Reading the Value Programmatically

value is a reflected attribute that updates as the user types. Read it directly from the element or listen for form data. Set it to fill the cells from code, for example to prefill a code the page already knows; a form reset brings back the value of load.

const otp = document.querySelector('mds-input-otp');

// Poll current state
console.log(otp.value); // e.g. "124" while in progress: empty cells add nothing

// React on form submit
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  console.log('Codice OTP:', data.get('otp'));
});

Full Authentication Flow

Combine autosubmit with a submit handler to verify the code and reflect the result - pair with mds-button in await state while the request is in flight.

<form id="otp-form" action="/auth/otp" method="post">
  <mds-input-otp name="otp" length="6" autosubmit></mds-input-otp>

  <mds-button
    id="submit-btn"
    type="submit"
    label="Conferma codice"
    variant="primary"
    tone="strong"
    disabled
  ></mds-button>
</form>

<script>
  const form = document.getElementById('otp-form');
  const btn = document.getElementById('submit-btn');
  const otpEl = form.querySelector('mds-input-otp');

  // Enable the button only once all digits are entered
  setInterval(() => {
    btn.disabled = otpEl.value.length < 6 ? true : undefined;
  }, 100);

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    btn.setAttribute('await', '');
    // ... send request, then remove await
  });
</script>

Layout Alignment

The host is an inline-flex container. Use a utility class to center it inside a card or modal.

<div class="flex justify-center py-600">
  <mds-input-otp name="otp"></mds-input-otp>
</div>