Announcing Ionic 8.6

We’re thrilled to share the latest release of Ionic Framework, packed with exciting new features and improvements. This release brings a new Input OTP component, a new Datetime property to show days from the previous and next months, and a fresh update to Stencil.

Let’s take a closer look at what’s new in 8.6 👇

Input OTP Component

We’ve introduced a new ion-input-otp component that provides a modern and accessible solution for one-time password inputs. It’s perfect for use cases like verification codes, security PINs, and other numeric or alphanumeric input fields.

Intelligent Input Handling

• Automatic focus movement between input boxes
• Full keyboard navigation support (arrow keys, tab)
• Smart paste functionality for multi-digit codes
• Accessibility compliance with ARIA attributes
• RTL (Right-to-Left) language support

Flexible Styling

• Configurable separators between input boxes
• Multiple shape variants (round, soft, rectangular)
• Two fill options (outline, solid)
• Customizable size options (small, medium, large)

If you’re building signup flows, logins, or two-factor screens, this component helps you deliver a better, more seamless user experience.

See the Input OTP documentation for more information.

Enhanced Datetime Navigation

The Datetime component now supports the showAdjacentDays property, which displays days from adjacent months within the calendar view. This enhancement improves usability by making it easier to select dates near month boundaries. When showAdjacentDays is enabled, users can select adjacent days (unless the day is disabled) and the calendar will automatically navigate to the appropriate month.

showAdjacentDays = true	showAdjacentDays = false

See the Datetime documentation for more information.

iOS 18 Haptic Feedback for Toggle

We’ve added iOS 18 haptic feedback to the ion-toggle component, providing users with tactile feedback when toggling switches on supported devices. This enhancement brings a more native and responsive feel to your apps.

Stencil Update

Stencil has been updated from v4.20 to v4.33, bringing in the latest features, enhancements, and bug fixes from the compiler that powers Ionic Framework.

🔧 Key Fixes & Improvements

• Scoped styles are now applied during SSR, solving visual mismatches between server and client rendering. (3363017)
• Scoped classes are now applied properly at runtime, resolving issues like #30323, where styles weren’t being correctly scoped in Shadow DOM contexts. (5982264)
• Fixes to scoped slot fallback behavior and forwarded slots help avoid broken layout or content in nested Ionic Framework components like ion-item or ion-select. (57e7e58)
• Components using Shadow DOM can now opt for declarative-shadow-dom or scoped rendering modes in SSR. (26e4aa3)
• Enabled dynamic DOM inspection and interaction with slotted content in scoped contexts. (2a1038e)
• Hydration behavior has improved across the board: from better style cleanup to smarter node patching, helping prevent DOM mismatches or ghost elements in Ionic Framework apps. (eafe1f9)
• Added typings for aria-* attributes, improving accessibility tooling and DX in Ionic Framework apps. (6e748ec)
• SSR now supports safe object serialization of hydrated components, easing advanced use cases in SSR and partial hydration for Ionic projects. (523461e)
• Optimized utility regexes for better runtime performance, which allows Ionic Framework apps to work on older versions of iOS, fixing #30219. (2f712bc)

For a complete list of updates, check out the Stencil Changelog.

Although this release has been thoroughly tested in Ionic Framework and related projects, there’s always a chance of regressions. If you encounter any issues related to this Stencil update, please open a new issue.

Notable Fixes

This release also brings attention to several important fixes from recent patches, alongside updates included in this release:

• Button & Input Password Toggle: Force the ARIA attributes to update based on the parent to improve accessibility. (4e38700)
• Checkbox & Toggle: Ensure proper visual selection with VoiceOver in Safari. (bb40a1e) (b1bc58f)
• Datetime: Support typing time values in 24-hour format. (ac6e6a0) Thanks to vunizhona for this contribution! 🎉
• Datetime: Display the correct month when multiple values are set. (14f32f8)
• Input & Textarea: Improved focus behavior to allow keyboard navigation to sibling elements inside ion-input or ion-textarea. For example, if a button is placed in the end slot, pressing Tab will now correctly move focus to the button and beyond. (2dea607)
• Item: Emit the click event only once when clicking padded space and emit the correct element. (7a9d138)
• Label: Prevent double onClick events when clicking labels in several components. (7d639b0)
• Modal: Move the footer inside of a sheet modal instead of cloning it while dragging. Fixes issues with duplicated elements, missing event listeners, and ignored styles. (4cbbbb0) Thank you to kumibrr for your contributions and further testing on this component. 🥳
• Overlays: Exclude backdrop-no-scroll class when toast is presented. (7f9df7a) Thanks to tobiloeb for this contribution! 🎊
• Segment View: Prevent vertical scroll while scrolling horizontally. (105796f)
• Select: Update icon color and apply correct focused class. (cad1c61)
• Vue: Update the output target to fix incorrect types. (f4186c6)

What’s Next

We’re currently investigating support for the latest version of React Router and will share more details soon. We’re also organizing the key issues we want to address in the next major Ionic Framework release.

This summer, we’re excited to welcome interns from Madison College to the project! They’re already diving into Ionic Framework issues, and we’re looking forward to their contributions.

We hope you’ll try out the latest updates and let us know how they’re working for you. Your feedback helps shape the future of Ionic. Thank you for being an essential part of the Ionic community and for your continued support. Stay tuned for more updates soon! 🚀