Calcite’s 3.0 major release is now available, offering consistency and ease of use in your apps. New features and enhancements include the new Autocomplete and Block Group components, usability improvements to List, easier integration with frameworks and imports, a 24-hour format property for Time Picker, Sheet’s resizable functionality, and improved accessibility and internationalization support for a wider range of users. Calcite continues to evolve offering resources to create beautiful, easy to use, cohesive experiences across apps with minimal effort.
3.0 introduced breaking changes that may require updates to apps. Breaking changes are introduced to improve stability, reliability, and consistency across Calcite.
Autocomplete component
Introducing the new Autocomplete component, which enhances text input by allowing developers to display dynamic suggestions as users type. The component provides a structured way to present predictive search results, while supporting configuration on how suggestions are fetched, populated, and managed.
The component offers events, which can trigger an asynchronous search, update the list of suggestions, and open the component’s dropdown when results are available. Learn more about the Autocomplete component and how to integrate it into your apps.
Block Group component
Block Group is a new component that provides organization and functionality to multiple Block elements. Block Group can also enable drag-and-drop reordering of grouped Block elements, providing a consistent way to manage sortable content.
Focus color token
A new global token, --calcite-color-focus, is available for designers and developers to customize the focus color. The CSS variable allows customization on the focus color in an application, such as supporting a component’s kind in its focus color.
Date Picker appearance
The Date Picker component includes many new UI improvements, such as when range is specified, the component displays two calendars in the layout. Additionally, month selection can now be changed via a native select menu to support more workflows.
Time Picker 24-hour format
Time Picker provides support for a 24-hour format using the hourFormat property, offering users more flexibility when selecting times and better compatibility with global time conventions. When specified the format can display the user’s default locale format, 12-hour format, or 24-hour format.
Sheet’s resizable functionality
Sheet features a resizable property, allowing users to adjust its height and width dynamically depending on position. The resizable container is accessible via mouse and keyboard to accommodate a more diverse set of workflows.
List keyboard dragging between Lists
List now supports dragging between different Lists for mouse and keyboard users. The component now offers a menu when interacting with a List Item to move its position within the current List, or with other Lists containing the same group value.
Accessibility and internationalization improvements
Calcite continues to prioritize accessibility and internationalization throughout its components to allow greater access to more audiences. To continue to build your apps with individuals in mind, visit designing for individuals and learn about localization.
Norwegian locale support
The Norwegian locale code has changed to no from nb. The nb locale is deprecated and will be removed in the future. However, the nb locale is still available so applications using it will continue to receive support for Norwegian until its removal. To learn more, visit Calcite’s supported languages.
<!-- Norwegian locale support -->
<calcite-button lang="no" loading>Hei</calcite-button>
<!-- Deprecated Norwegian locale support -->
<calcite-button lang="nb" loading>Hei</calcite-button>Meter’s high contrast support
Meter offers high contrast support when users have the high contrast setting enabled on Windows operating systems. The component now displays its value to support more users when high contrast is enabled on the operating system or browser.
3.0 breaking change highlights
Removed components and properties
Calcite’s 3.0 release removes deprecated components and properties, including the Pick List and Value List components. Use the List component instead. Removed components include:
- Pick List
- Pick List Group
- Pick List Item
- Value List
- Value List Group
- Value List Item
For more details on the removals, visit the February 2025 summary notes removed components and removed properties sections.
List usability improvements
List includes consistency and overall UI improvements including component sizing, updated padding, spacing adjustments, font sizes, and consistency. Now when the component has nested child List Items, there is more distinct visual representation in the component.
Imports
Calcite has made changes under the hood to ensure stability, consistency, and support for your apps. For the custom elements build you may have different imports for individual components as you migrate your apps to 3.0.
// Version 3.0 imports
import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-icon";
import "@esri/calcite-components/dist/components/calcite-slider";
// Version 2.x imports
import "@esri/calcite-components/dist/components/calcite-button.js";
import "@esri/calcite-components/dist/components/calcite-icon.js";
import "@esri/calcite-components/dist/components/calcite-slider.js";
Framework integration
With 3.0, you no longer need to install an Angular wrapper; you can now use Calcite directly in your apps. Additionally, React 19+ natively supports custom elements, so a wrapper is no longer required. Older React versions can still use the wrapper for smoother integration.
Also, prior to version 3.0, passing boolean attributes to Calcite’s React components converted the values to strings due to compatibility issues with web components. Now in 3.0, boolean attributes should be passed as true or false, replacing the previous workaround of using true and undefined. To learn more, visit boolean attributes and explore the framework integration page to integrate your apps with frameworks and build tools.
Explore what’s new in 3.0
For a full list of changes, visit Calcite’s February 2025 summary notes, which also lists changes since October 2024 including breaking changes, features, and bug fixes.
Earlier this month Calcite designers and engineer team members presented What’s New: Calcite Design System (February 2025) showcasing 3.0 breaking changes, feature enhancements, and engaged in a live Q&A session. Thank you to all who attended with us live. The event was recorded and is available for viewing.
2025 Developer and Technology Summit
The 2025 Developer and Technology Summit is just a few weeks away on March 11-14, 2025 in Palm Springs. We hope to meet with you in Palm Springs, but if you can’t join in person there are many live streamed sessions to join in virtually.
Explore sessions on building web apps with components, including Calcite:
- App Development with Components Part 1: Core Patterns
- App Development with Components Part 2: Using Frameworks
- App Development with Components Part 3: User Experience
- Building Accessible Web Apps with ArcGIS Maps SDK for JavaScript and Calcite
- Calcite Design System: What’s New and the Road Ahead
And attend user interface and user experience (UI/UX) sessions to incorporate into your apps in 2025:
- Optimize Your Popups: Accessibility & Internationalization
- ArcGIS Maps SDK for JavaScript: Better UX for Popups
- Eyes on Design: The Art and Science of Creating Intuitive Interfaces
- Improving Usability: Simple User Research Techniques for Better App Experiences
- ArcGIS Maps SDK for JavaScript: Capabilities & Techniques
- Managing Users, Content, and Groups within Your Web GIS
- Unlock the Power of ArcGIS Configurable Apps with HTML, CSS, and Arcade
Article Discussion: