feat(input-otp): add new input-otp component

[brandyscarney]

Issue number: internal

---

What is the current behavior?

In order to re-create an OTP Input component users have to custom style an <ion-input>, possibly multiple, to get the design and functionality they want.

What is the new behavior?

• Adds a new component ion-input-otp which provides the OTP input functionality
  • Displays as an input group with multiple boxes accepting a single character
  • Accepts type which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
  • Supports changing the displayed keyboard using the inputmode property
  • Accepts a length property to control the number of input boxes
  • Accepts the following properties to change the design: fill, shape, size, color
  • Accepts a separators property to show a separator between 1 or more input boxes
  • Supports the disabled, readonly and invalid states
  • Supports limiting the accepted input via the pattern property
  • Emits the following events: ionInput, ionChange, ionComplete, ionBlur, ionFocus
  • Exposes the following method: setFocus

Does this introduce a breaking change?

• Yes
• No

Other information

Previews

• Basic Preview
• Shape Preview
• Size Preview
• Color Preview
• Separators Preview

Documentation

• ionic-docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2025 6:31pm

[exorex]

Thank you, @brandyscarney, for your work on this component.

One feature suggestion: pressing CTRL+A (or CMD+A on macOS) inside the component could select and clear all input fields at once. This would align with common input behavior and improve UX for users needing to re-enter their code quickly.

Example: https://input-otp.rodz.dev/

[thetaPC]

No issues found with core and Angular. I'm waiting on React and Vue to be ready for review.

[thetaPC]

Thank you so much!

[thetaPC]

LGTM 🎊