What's New in Calcite Design System (March 2024)

Learn all about the key updates in Calcite Design System that we’ve recently released!

Calcite enables you to build beautiful, user-friendly, and consistent experiences across applications with minimal effort. Since October, we’ve made important improvements to components that facilitate responsive app development, introduced new components, and made many updates worth exploring. Read on to explore some of the highlights since October.

Version 2.x: An improved developer experience

In November 2023, we released version 2.0 (a breaking change release) to increase consistency across Calcite, which includes updates to the component’s names, states, and patterns. We also updated CSS property names in order to more accurately represent their use. For example, --calcite-ui-brand was changed to --calcite-color-brand to indicate that it is a color property. For the full list of property name changes, refer to the CSS variable comparison tables.

Responsive design

Responsive web design ensures a positive user experience, regardless of screen size, platform, and orientation. We have made significant improvements to components in order to support more workflows, devices, and use cases. All components underwent a design review, and many were updated with new functionality to fluidly adapt their layout and/or experience based on screen size.

Components will modify to the dimensions of your app in realtime.

Card Group

The new Card Group component supports workflows using more than one Card, for example to represent content items within a group. Filtering and opt-in selection modes enable you to build interactive workflows with Cards. Card Group predictably spaces Cards and offers accessible keyboard navigation.

Card Group with selection mode set to multiple containing cards of a bear, puppy, and cat. The cards with the cat and puppy are selected.

Angular wrapper

Web components encapsulate functionality into a reusable package for maximum interoperability between frameworks. When integrating web components into apps built with Angular, a wrapper allows you to work with the components using programming patterns that are native to Angular. Essentially, web components are wrapped as Angular Components.

The new Angular wrapper for Calcite components supports:

Explore the Angular wrapper with Calcite’s calcite-components-examples repository, or the CodeSandbox template for a cloud-based environment. Using React? See the React wrapper that supports React’s synthetic event system.

Form validation

Form validation messages are displayed with Input Message, ensuring uniformity across different browsers and consistency with Calcite design patterns. Additional constraint validation properties have been implemented for preventing form submissions, and improving your UI/UX. When validation is enabled, components will display either:

The validation constraints are stored as a list of objects that define constraints for the component’s fields. For instance, setting custom validation messages and icons for form fields based on the expected input. If a field’s value matches a pattern or falls outside specified range, such as a “min” or “max”, a custom message and icon will display.

Validation with Input Text, Input Number, Select, Date Picker, and Combobox using the status, validationMessage, and validationIcon properties.

A slot for no filtered results

A new slot is available in List that displays when a filter is enabled and no filter results are found. For instance, a Notice can display a message indicating there are no results, and what could result in a successful search.

List with a slotted Notice displaying no fruits are found when searching for bananas.

Dropdown Item disabled property

The disabled property is now supported in Dropdown Item to support advanced use cases in apps.

Dropdown with three items, Box Chart, Heat Chart and a disabled Histogram Dropdown Item.

Learn more

Calcite’s releases contain many additional features, bug fixes, and breaking changes that are not mentioned in this blog post. Explore the February summary notes, and in particular the changes since October 2023 for a full list of capabilities offered in Calcite.

Calcite at the 2024 Esri Developer Summit

Join us at the Esri Developer Summit in Palm Springs from March 12-15, where you can attend technical presentations on Calcite, the ArcGIS Maps SDK for JavaScript, and many other topics about developing with ArcGIS. You can discuss your own project with Esri’s development teams, network with the developer community, and play dodgeball!

Learn more about Esri Developer Summit, and explore technical sessions and demo theater presentations featuring Calcite, including:

Join us at the 2024 Esri Developer Summit March 12-15 in Palm Springs, California

About the authors

Passionate about web map accessibility and bringing the web and maps to wider audiences. A senior product engineer with Calcite Design System. Enjoys exploring Minnesota's wilderness and has a goal to visit every major league baseball stadium across America.


Julie Powell is a Principal Product Manager, focusing on Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets. Julie has worked on a wide range of projects and consulting endeavors, including serving as technical lead for web mapping solutions for strategic customers.

Inline Feedbacks
View all comments

Next Article

Tighten Up Your Edits with Editing Constraints in ArcGIS Online

Read this article