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 methods: reset, setFocus

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.5.7-dev.11747772857.11c9c939

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 21, 2025 9:32pm

[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/

[ShaneK]

Screenshot.2025-05-13.at.13.18.12.mp4

I was surprised by how well VoiceOver works on this since you said you didn't try it at all. There is some funkiness around highlighting from VoiceOver that we saw with some other components. I'm not sure how to address it here or if you even want to try now, but I thought I'd point it out.

[ShaneK]

Looks really good so far! I requested some changes and I think Voice Over has some issues. I didn't test with any other a11y systems though since I don't really have an easy way to do that, but I imagine they'll act pretty similarly to how I showed Voice Over acting. From previous experience, other screen readers handle this sort of focus issue better than Voice Over does, so they may even be better.

[ShaneK]

Very close! Just missed one thing