Skip to content

feat(input-otp): convert to a form associated shadow component #30785 #30884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
brandyscarney wants to merge 2 commits into
base: FW-6912-textarea
Choose a base branch
from
Draft

feat(input-otp): convert to a form associated shadow component #30785 #30884

brandyscarney wants to merge 2 commits into from
+63 −9

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Dec 19, 2025

Issue number: internal

What is the current behavior?

Input Otp uses scoped encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

What is the new behavior?

  • Converts ion-input-otp to shadow with formAssociated: true
  • Adds shadow parts for inner elements

Does this introduce a breaking change?

  • Yes
  • No
BREAKING CHANGE:

Input Otp has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

Other information

@vercel
Copy link

vercel bot commented Dec 19, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
ionic-framework Ready Ready Preview, Comment Dec 19, 2025 9:55pm

@github-actions github-actions bot added package: core @ionic/core package package: angular @ionic/angular package labels Dec 19, 2025
@github-actions github-actions bot added package: vue @ionic/vue package package: react @ionic/react package labels Dec 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

package: angular @ionic/angular package package: core @ionic/core package package: react @ionic/react package package: vue @ionic/vue package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@brandyscarney