{"id":6418,"date":"2025-06-04T14:26:54","date_gmt":"2025-06-04T18:26:54","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6418"},"modified":"2025-06-04T14:55:48","modified_gmt":"2025-06-04T18:55:48","slug":"announcing-ionic-8-6","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6","title":{"rendered":"Announcing Ionic 8.6"},"content":{"rendered":"\n<p>We&#8217;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.<\/p>\n\n\n\n<p>Let&#8217;s take a closer look at what&#8217;s new in 8.6 \ud83d\udc47<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-input-otp-component\">Input OTP Component<\/h2>\n\n\n\n<p>We&#8217;ve introduced a new <code>ion-input-otp<\/code> component that provides a modern and accessible solution for one-time password inputs. It&#8217;s perfect for use cases like verification codes, security PINs, and other numeric or alphanumeric input fields.<\/p>\n\n\n\n<p><strong>Intelligent Input Handling<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatic focus movement between input boxes<\/li>\n\n\n\n<li>Full keyboard navigation support (arrow keys, tab)<\/li>\n\n\n\n<li>Smart paste functionality for multi-digit codes<\/li>\n\n\n\n<li>Accessibility compliance with ARIA attributes<\/li>\n\n\n\n<li>RTL (Right-to-Left) language support<\/li>\n<\/ul>\n\n\n\n<p><strong>Flexible Styling<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Configurable separators between input boxes<\/li>\n\n\n\n<li>Multiple shape variants (round, soft, rectangular)<\/li>\n\n\n\n<li>Two fill options (outline, solid)<\/li>\n\n\n\n<li>Customizable size options (small, medium, large)<\/li>\n<\/ul>\n\n\n\n<p>If you&#8217;re building signup flows, logins, or two-factor screens, this component helps you deliver a better, more seamless user experience.<\/p>\n\n\n\n<figure class=\"wp-block-video device-demo\"><video height=\"1562\" style=\"aspect-ratio: 720 \/ 1562;\" width=\"720\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/input-otp.mov\"><\/video><\/figure>\n\n\n\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/input-otp\" target=\"_blank\" rel=\"noreferrer noopener\">Input OTP documentation<\/a> for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-enhanced-datetime-navigation\">Enhanced Datetime Navigation<\/h2>\n\n\n\n<p>The Datetime component now supports the <code>showAdjacentDays<\/code> 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 <code>showAdjacentDays<\/code> is enabled, users can select adjacent days (unless the day is disabled) and the calendar will automatically navigate to the appropriate month.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><code>showAdjacentDays = true<\/code><\/td><td><code>showAdjacentDays = false<\/code><\/td><\/tr><tr><td><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/05\/showAdjacentDays-true.mp4\"><\/video><\/td><td><video autoplay=\"\" controls=\"\" loop=\"\" muted=\"\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/05\/showAdjacentDays-false.MP4.mp4\"><\/video><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/datetime#show-adjacent-days\" target=\"_blank\" rel=\"noreferrer noopener\">Datetime documentation<\/a> for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ios-18-haptic-feedback-for-toggle\">iOS 18 Haptic Feedback for Toggle<\/h2>\n\n\n\n<p>We&#8217;ve added iOS 18 haptic feedback to the <code>ion-toggle<\/code> component, providing users with tactile feedback when toggling switches on supported devices. This enhancement brings a more native and responsive feel to your apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-stencil-update\">Stencil Update<\/h2>\n\n\n\n<p>Stencil has been updated from <code>v4.20<\/code> to <code>v4.33<\/code>, bringing in the latest features, enhancements, and bug fixes from the compiler that powers Ionic Framework.<\/p>\n\n\n\n<p><strong>\ud83d\udd27 Key Fixes &amp; Improvements<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scoped styles are now applied during SSR, solving visual mismatches between server and client rendering. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/3363017df3f1ef6d2f3f5433cb0d15ebc7ba948d\" target=\"_blank\" rel=\"noreferrer noopener\">3363017<\/a>)<\/li>\n\n\n\n<li>Scoped classes are now applied properly at runtime, resolving issues like <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\/30323\" target=\"_blank\" rel=\"noreferrer noopener\">#30323<\/a>, where styles weren&#8217;t being correctly scoped in Shadow DOM contexts. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/5982264793b81704a20815ea00737032257a436b\" target=\"_blank\" rel=\"noreferrer noopener\">5982264<\/a>)<\/li>\n\n\n\n<li>Fixes to scoped slot fallback behavior and forwarded slots help avoid broken layout or content in nested Ionic Framework components like <code>ion-item<\/code> or ion-select. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/57e7e5886d81ba3c3357683415cb592e1e72740d\" target=\"_blank\" rel=\"noreferrer noopener\">57e7e58<\/a>)<\/li>\n\n\n\n<li>Components using Shadow DOM can now opt for <code>declarative-shadow-dom<\/code> or <code>scoped<\/code> rendering modes in SSR. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/26e4aa3221d293f294d56b050f29a244d3e44c8c\" target=\"_blank\" rel=\"noreferrer noopener\">26e4aa3<\/a>)<\/li>\n\n\n\n<li>Enabled dynamic DOM inspection and interaction with slotted content in scoped contexts. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/2a1038e06440cf541534df9ae938bf74e0b37bb4\" target=\"_blank\" rel=\"noreferrer noopener\">2a1038e<\/a>)<\/li>\n\n\n\n<li>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. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/eafe1f9d55f964d7f4927e18f4e3f7347e30a7f2\" target=\"_blank\" rel=\"noreferrer noopener\">eafe1f9<\/a>)<\/li>\n\n\n\n<li>Added typings for aria-* attributes, improving accessibility tooling and DX in Ionic Framework apps. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/6e748ec831d7a3ad16d690c950d1adb4d74658ef\" target=\"_blank\" rel=\"noreferrer noopener\">6e748ec<\/a>)<\/li>\n\n\n\n<li>SSR now supports safe object serialization of hydrated components, easing advanced use cases in SSR and partial hydration for Ionic projects. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/523461e3bf884c0f6acba59b88b81c1b8cf0ed4a\" target=\"_blank\" rel=\"noreferrer noopener\">523461e<\/a>)<\/li>\n\n\n\n<li>Optimized utility regexes for better runtime performance, which allows Ionic Framework apps to work on older versions of iOS, fixing <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\/30219\" target=\"_blank\" rel=\"noreferrer noopener\"><em>#<\/em>30219<\/a>. (<a href=\"https:\/\/github.com\/stenciljs\/core\/commit\/2f712bc045f0abdbeea8a8441f983880322f65b9\" target=\"_blank\" rel=\"noreferrer noopener\">2f712bc<\/a>)<\/li>\n<\/ul>\n\n\n\n<p>For a complete list of updates, check out the <a href=\"https:\/\/github.com\/stenciljs\/core\/blob\/main\/CHANGELOG.md\" target=\"_blank\" rel=\"noreferrer noopener\">Stencil Changelog<\/a>.<\/p>\n\n\n\n<p>Although this release has been thoroughly tested in Ionic Framework and related projects, there&#8217;s always a chance of regressions. If you encounter any issues related to this Stencil update, please <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/issues\" target=\"_blank\" rel=\"noreferrer noopener\">open a new issue<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-notable-fixes\">Notable Fixes<\/h2>\n\n\n\n<p>This release also brings attention to several important fixes from recent patches, alongside updates included in this release:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button &amp; Input Password Toggle<\/strong>: Force the ARIA attributes to update based on the parent to improve accessibility. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/4e387005663b4e8425cb28e41608bb4f924b3864\" target=\"_blank\" rel=\"noreferrer noopener\">4e38700<\/a>)<\/li>\n\n\n\n<li><strong>Checkbox &amp; Toggle<\/strong>: Ensure proper visual selection with VoiceOver in Safari. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/bb40a1efe71237075db2f3a536eddeb1d7c400fc\" target=\"_blank\" rel=\"noreferrer noopener\">bb40a1e<\/a>) (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/b1bc58f1c8ffdc859e3f4349040bb1ad6e383d1e\" target=\"_blank\" rel=\"noreferrer noopener\">b1bc58f<\/a>)<\/li>\n\n\n\n<li><strong>Datetime<\/strong>: Support typing time values in 24-hour format. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/ac6e6a03174263d09ec55c9742a026862a3df444\" target=\"_blank\" rel=\"noreferrer noopener\">ac6e6a0<\/a>) Thanks to <a href=\"https:\/\/github.com\/vunizhona\" target=\"_blank\" rel=\"noreferrer noopener\">vunizhona<\/a> for this contribution! \ud83c\udf89<\/li>\n\n\n\n<li><strong>Datetime<\/strong>: Display the correct month when multiple values are set. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/14f32f8feea7b3880367868ff0a2134b0c28cc07\" target=\"_blank\" rel=\"noreferrer noopener\">14f32f8<\/a>)<\/li>\n\n\n\n<li><strong>Input &amp; Textarea<\/strong>: Improved focus behavior to allow keyboard navigation to sibling elements inside <code>ion-input<\/code> or <code>ion-textarea<\/code>. For example, if a button is placed in the <code>end<\/code> slot, pressing <kbd>Tab<\/kbd> will now correctly move focus to the button and beyond. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/2dea6071db12903f2ce815328db19b95366aa9a5\" target=\"_blank\" rel=\"noreferrer noopener\">2dea607<\/a>)<\/li>\n\n\n\n<li><strong>Item<\/strong>: Emit the <code>click<\/code> event only once when clicking padded space and emit the correct element. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/7a9d138e3d5ecde55c12ff337ca29052a9194d69\" target=\"_blank\" rel=\"noreferrer noopener\">7a9d138<\/a>)<\/li>\n\n\n\n<li><strong>Label<\/strong>: Prevent double <code>onClick<\/code> events when clicking labels in several components. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/7d639b0412120523f758942c855cb69f9a52e9d9\" target=\"_blank\" rel=\"noreferrer noopener\">7d639b0<\/a>)<\/li>\n\n\n\n<li><strong>Modal<\/strong>: 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. <a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/4cbbbb053ad36d176f1d79ad09777f94ca8076d2\" target=\"_blank\" rel=\"noreferrer noopener\">(4cbbbb0<\/a>) Thank you to <a href=\"https:\/\/github.com\/kumibrr\" target=\"_blank\" rel=\"noreferrer noopener\">kumibrr<\/a> for your contributions and further testing on this component. \ud83e\udd73<\/li>\n\n\n\n<li><strong>Overlays<\/strong>: Exclude <code>backdrop-no-scroll<\/code> class when toast is presented. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/7f9df7a89447e51eec0b1516069a1e0c9c9722e5\" target=\"_blank\" rel=\"noreferrer noopener\">7f9df7a<\/a>) Thanks to  <a href=\"https:\/\/github.com\/tobiloeb\" target=\"_blank\" rel=\"noreferrer noopener\">tobiloeb<\/a> for this contribution! \ud83c\udf8a<\/li>\n\n\n\n<li><strong>Segment View<\/strong>: Prevent vertical scroll while scrolling horizontally. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/105796f6bc8f961f58ecbb101285097cc86891c0\" target=\"_blank\" rel=\"noreferrer noopener\">105796f<\/a>)<\/li>\n\n\n\n<li><strong>Select<\/strong>: Update icon color and apply correct focused class. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/cad1c61528c52a53b2164f2ea46f49144d3b46ad\" target=\"_blank\" rel=\"noreferrer noopener\">cad1c61<\/a>)<\/li>\n\n\n\n<li><strong>Vue<\/strong>: Update the output target to fix incorrect types. (<a href=\"https:\/\/github.com\/ionic-team\/ionic-framework\/commit\/f4186c6761c46bf386f8effecf90d88831c34726\" target=\"_blank\" rel=\"noreferrer noopener\">f4186c6<\/a>)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-s-next\">What&#8217;s Next<\/h2>\n\n\n\n<p>We&#8217;re currently investigating support for the latest version of React Router and will share more details soon. We&#8217;re also organizing the key issues we want to address in the next major Ionic Framework release.<\/p>\n\n\n\n<p>This summer, we&#8217;re excited to welcome interns from Madison College to the project! They&#8217;re already diving into Ionic Framework issues, and we&#8217;re looking forward to their contributions.<\/p>\n\n\n\n<p>We hope you&#8217;ll try out the latest updates and let us know how they&#8217;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! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;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&#8217;s take a closer look at what&#8217;s new in 8.6 \ud83d\udc47<\/p>\n","protected":false},"author":21,"featured_media":6431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[23,3],"class_list":["post-6418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-framework","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Ionic 8.6 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic 8.6\" \/>\n<meta property=\"og:description\" content=\"We&#8217;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&#8217;s take a closer look at what&#8217;s new in 8.6 \ud83d\udc47\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-04T18:26:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-04T18:55:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brandy Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brandy Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\"},\"author\":{\"name\":\"Brandy Smith\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\"},\"headline\":\"Announcing Ionic 8.6\",\"datePublished\":\"2025-06-04T18:26:54+00:00\",\"dateModified\":\"2025-06-04T18:55:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\"},\"wordCount\":891,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\",\"name\":\"Announcing Ionic 8.6 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png\",\"datePublished\":\"2025-06-04T18:26:54+00:00\",\"dateModified\":\"2025-06-04T18:55:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic 8.6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\",\"name\":\"Brandy Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"caption\":\"Brandy Smith\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/brandy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic 8.6 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic 8.6","og_description":"We&#8217;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&#8217;s take a closer look at what&#8217;s new in 8.6 \ud83d\udc47","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6","og_site_name":"Ionic Blog","article_published_time":"2025-06-04T18:26:54+00:00","article_modified_time":"2025-06-04T18:55:48+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","type":"image\/png"}],"author":"Brandy Smith","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Brandy Smith","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6"},"author":{"name":"Brandy Smith","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26"},"headline":"Announcing Ionic 8.6","datePublished":"2025-06-04T18:26:54+00:00","dateModified":"2025-06-04T18:55:48+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6"},"wordCount":891,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-8-6#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6","url":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6","name":"Announcing Ionic 8.6 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","datePublished":"2025-06-04T18:26:54+00:00","dateModified":"2025-06-04T18:55:48+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-8-6"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-6#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic 8.6"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26","name":"Brandy Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","caption":"Brandy Smith"},"url":"https:\/\/ionic.io\/blog\/author\/brandy"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/06\/8.6.0-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6418"}],"version-history":[{"count":41,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6418\/revisions"}],"predecessor-version":[{"id":6463,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6418\/revisions\/6463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6431"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}