Skip to content
Home

v11

This page lists the changes introduced in v11. It focuses on breaking changes, removals, and required migrations, grouped by area for clarity.

Migration

v11 of @dnb/eufemia contains breaking changes. As a migration process, you can simply search and replace:

Important: Upgrading to v11 requires React and React DOM v19 (React 19 Upgrade Guide).

  1. Replace innerRef with ref on all Eufemia components.
  2. Replace <Context.Provider> with <Context> when using Eufemia contexts directly (React 19 deprecation).
  3. If you import Eufemia SCSS source files with @import, replace with @use and namespace your mixin/variable calls (see SCSS: @import → @use).
  4. Replace the size prop with span on Flex.Item and Card components.

innerRef → ref

React 19 passes ref as a regular prop, making forwardRef and custom innerRef patterns unnecessary. All Eufemia components that previously accepted an innerRef prop now accept ref directly.

Before:

<Input innerRef={myRef} />
<Button innerRef={myRef} />
<Element innerRef={myRef} />

After:

<Input ref={myRef} />
<Button ref={myRef} />
<Element ref={myRef} />

Affected components: Anchor, Button, Checkbox, Dropdown, Element, FormLabel, HeightAnimation, Input, InputMasked, PortalRoot, Radio, ScrollView, Section, Space, Switch, Textarea, Typography, Flex.Item, Flex.Container, Field.String, Field.Number, Field.Password, Field.PhoneNumber, Form.Element, and all Element wrappers (Div, Span, Code, etc.).

Context.Provider → Context

React 19 deprecates <Context.Provider>. You can now render <Context> directly as a provider. All internal Eufemia context providers have been updated to use this pattern.

If you use any Eufemia context objects directly (e.g. Wizard.Provider), update your code:

Before:

<SomeContext.Provider value={value}>{children}</SomeContext.Provider>

After:

<SomeContext value={value}>{children}</SomeContext>

Install

To upgrade to @dnb/eufemia v11 with NPM, use:

$ npm i @dnb/eufemia@11
# or
$ yarn add @dnb/eufemia@11
# or
$ pnpm add @dnb/eufemia@11

Summary of changes:

  • All snake case (on_click) events and properties has been converted to use camel case (onClick). The reason for previously using snake case was to support Web Components – but the support was discontinued in v10.
  • Replaced deprecated <Context.Provider> with direct <Context> rendering across all internal context providers (React 19).

Components

Section

  1. Most style_type variants were removed. Use the new variant or backgroundColor property instead:
    • mint-green
    • sea-green
    • emerald-green
    • lavender
    • black-3
    • sand-yellow
    • pistachio
    • fire-red
    • fire-red-8
  2. Remove spacing. Use innerSpace instead.
  3. Replace inner_ref with ref.

HelpButton

Translations

  • Replace HelpButton.aria_role with HelpButton.ariaRole.

Autocomplete

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.

Properties

  • Replace selected_key with selectedKey.
  • Replace default_value with defaultValue.
  • Replace prevent_selection with preventSelection.
  • Replace prevent_close with preventClose.
  • Replace keep_open with keepOpen.
  • Replace independent_width with independentWidth.
  • Replace fixed_postion with fixedPosition.
  • Replace enable_body_lock with enableBodyLock.
  • Replace align_drawer with alignDrawer.
  • Replace list_class with listClass.
  • Replace portal_class with portalClass.
  • Replace no_scroll_animation with noScrollAnimation.
  • Replace skip_portal with skipPortal.
  • Replace min_height with minHeight.
  • Replace max_height with maxHeight.
  • Replace observer_element with observerElement.
  • Replace cache_hash with cacheHash.
  • Replace wrapper_element with wrapperElement.
  • Replace options_render with optionsRender.
  • Replace triangle_position with arrowPosition.
  • Replace skip_keysearch with skipKeysearch.
  • Replace page_offset with pageOffset.
  • Replace ignore_events with ignoreEvents.
  • Replace no_animation with noAnimation.
  • Replace label_direction with labelDirection.
  • Replace no_options with noOptions.
  • Replace show_all with showAll.
  • Replace aria_live_options with ariaLiveOptions.
  • Replace indicator_label with indicatorLabel.
  • Replace show_options_sr with showOptionsSr.
  • Replace selected_sr with selectedSr.
  • Replace submit_button_title with submitButtonTitle.
  • Replace submit_button_icon with submitButtonIcon.
  • Replace input_ref with inputRef.
  • Replace icon_size with iconSize.
  • Replace icon_position with iconPosition.
  • Replace input_icon with inputIcon.
  • Replace label_sr_only with labelSrOnly.
  • Replace keep_value with keepValue.
  • Replace keep_selection with keepSelection.
  • Replace keep_value_and_selection with keepValueAndSelection.
  • Replace show_clear_button with showClearButton.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace disable_filter with disableFilter.
  • Replace disable_reorder with disableReorder.
  • Replace disable_highlighting with disableHighlighting.
  • Replace show_submit_button with showSubmitButton.
  • Replace submit_element with submitElement.
  • Replace align_autocomplete with align.
  • Replace input_element with inputElement.
  • Replace search_in_word_index with searchInWordIndex.
  • Replace search_numbers with searchNumbers.
  • Replace input_value with inputValue.
  • Replace open_on_focus with openOnFocus.
  • Replace drawer_class with drawerClass.
  • Replace prevent_focus with preventFocus.
  • Replace action_menu with actionMenu.
  • Replace is_popup with isPopup.
  • Replace opened with open.
  • Replace selectall with selectAll.

Events

  • Replace on_type with onType.
  • Replace on_focus with onFocus.
  • Replace on_blur with onBlur.
  • Replace on_change with onChange.
  • Replace on_select with onSelect.
  • Replace on_show with onOpen.
  • Replace on_hide with onClose.

Translations

  • Replace Autocomplete.no_options with Autocomplete.noOptions.
  • Replace Autocomplete.show_all with Autocomplete.showAll.
  • Replace Autocomplete.aria_live_options with Autocomplete.ariaLiveOptions.
  • Replace Autocomplete.indicator_label with Autocomplete.indicatorLabel.
  • Replace Autocomplete.show_options_sr with Autocomplete.showOptionsSr.
  • Replace Autocomplete.selected_sr with Autocomplete.selectedSr.
  • Replace Autocomplete.submit_button_title with Autocomplete.submitButtonTitle.

Styling

  • Replace CSS class dnb-autocomplete--opened with dnb-autocomplete--open.

DrawerListDataArrayObject

  • Replace selected_value with selectedValue.
  • Replace suffix_value with suffixValue.
  • Replace search_content with searchContent.
  • Replace class_name with className.

Dropdown

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • Replace selected_key with selectedKey.
  • Replace default_value with defaultValue.
  • Replace prevent_selection with preventSelection.
  • Replace prevent_close with preventClose.
  • Replace keep_open with keepOpen.
  • Replace independent_width with independentWidth.
  • Replace fixed_postion with fixedPosition.
  • Replace enable_body_lock with enableBodyLock.
  • Replace align_drawer with alignDrawer.
  • Replace list_class with listClass.
  • Replace portal_class with portalClass.
  • Replace no_scroll_animation with noScrollAnimation.
  • Replace skip_portal with skipPortal.
  • Replace min_height with minHeight.
  • Replace max_height with maxHeight.
  • Replace observer_element with observerElement.
  • Replace cache_hash with cacheHash.
  • Replace wrapper_element with wrapperElement.
  • Replace options_render with optionsRender.
  • Replace triangle_position with arrowPosition.
  • Replace skip_keysearch with skipKeysearch.
  • Replace page_offset with pageOffset.
  • Replace ignore_events with ignoreEvents.
  • Replace no_animation with noAnimation.
  • Replace label_direction with labelDirection.
  • Replace icon_size with iconSize.
  • Replace icon_position with iconPosition.
  • Replace label_sr_only with labelSrOnly.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace more_menu with moreMenu.
  • Replace align_dropdown with align.
  • Replace trigger_element with triggerElement.
  • Replace open_on_focus with openOnFocus.
  • Replace action_menu with actionMenu.
  • Replace is_popup with isPopup.
  • Replace prevent_focus with preventFocus.
  • Replace opened with open.

Events

  • Replace on_change with onChange.
  • Replace on_select with onSelect.
  • Replace on_show with onOpen.
  • Replace on_hide with onClose.
  • Replace on_show_focus with onOpenFocus.
  • Replace on_hide_focus with onCloseFocus.

Styling

  • Replace CSS class dnb-dropdown--opened with dnb-dropdown--open.

DrawerListDataArrayObject

  • Replace selected_value with selectedValue.
  • Replace suffix_value with suffixValue.
  • Replace search_content with searchContent.
  • Replace class_name with className.

DrawerList

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • Replace type DrawerListDataObjectUnion with DrawerListDataArrayItem.
  • Replace type DrawerListDataObject with DrawerListDataArrayObject.
  • Replace import { ItemContent } from '@dnb/eufemia/fragments/drawer-list/DrawerList' with import { ItemContent } from '@dnb/eufemia/fragments/drawer-list/DrawerListItem'.
  • Replace selected_key with selectedKey.
  • Replace default_value with defaultValue.
  • Replace prevent_selection with preventSelection.
  • Replace prevent_close with preventClose.
  • Replace keep_open with keepOpen.
  • Replace independent_width with independentWidth.
  • Replace fixed_postion with fixedPosition.
  • Replace enable_body_lock with enableBodyLock.
  • Replace align_drawer with alignDrawer.
  • Replace list_class with listClass.
  • Replace portal_class with portalClass.
  • Replace no_scroll_animation with noScrollAnimation.
  • Replace skip_portal with skipPortal.
  • Replace min_height with minHeight.
  • Replace max_height with maxHeight.
  • Replace observer_element with observerElement.
  • Replace cache_hash with cacheHash.
  • Replace wrapper_element with wrapperElement.
  • Replace options_render with optionsRender.
  • Replace triangle_position with arrowPosition.
  • Replace skip_keysearch with skipKeysearch.
  • Replace page_offset with pageOffset.
  • Replace ignore_events with ignoreEvents.
  • Replace no_animation with noAnimation.
  • Replace label_direction with labelDirection.
  • Replace action_menu with actionMenu.
  • Replace is_popup with isPopup.
  • Replace prevent_focus with preventFocus.
  • Replace opened with open.
  • Remove prepared_data.

Events

  • Replace on_show with onOpen.
  • Replace on_hide with onClose.
  • Replace handle_dismiss_focus with handleDismissFocus.
  • Replace on_change with onChange.
  • Replace on_pre_change with onPreChange.
  • Replace on_resize with onResize.
  • Replace on_select with onSelect.
  • Replace on_state_update with onStateUpdate.

Styling

  • Replace CSS class dnb-drawer-list--opened with dnb-drawer-list--open.

DrawerListDataArrayObject

  • Replace selected_value with selectedValue.
  • Replace suffix_value with suffixValue.
  • Replace search_content with searchContent.
  • Replace class_name with className.

Anchor

  • When using icons in an Anchor (text link), use the icon property instead of inlining it.

Properties

  • Find and remove scrollToHashHandler. Smooth hash scrolling is now supported by all major browsers.
  • Replace inner_ref with ref.

Input

Properties

  • The inputPropTypes export has been removed as part of the PropTypes removal. If you were importing it via import { inputPropTypes } from '@dnb/eufemia/components/input', remove the import — runtime prop validation is no longer provided.
  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • Replace label_direction with labelDirection.
  • Replace label_sr_only with labelSrOnly.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace input_state with inputState.
  • Replace submit_button_title with submitButtonTitle.
  • Replace clear_button_title with clearButtonTitle.
  • Replace keep_placeholder with keepPlaceholder.
  • Replace input_class with inputClass.
  • Replace input_attributes with inputAttributes.
  • Replace input_element with inputElement.
  • Replace icon_size with iconSize.
  • Replace icon_position with iconPosition.
  • Replace inner_ref with ref.
  • Replace inner_element with innerElement.
  • Replace submit_element with submitElement.
  • Replace submit_button_variant with submitButtonVariant.
  • Replace submit_button_icon with submitButtonIcon.
  • Replace submit_button_status with submitButtonStatus.
  • Replace selectall with selectAll.

Events

  • Replace on_change with onChange.
  • Replace on_focus with onFocus.
  • Replace on_key_down with onKeyDown.
  • Replace on_blur with onBlur.
  • Replace on_submit with onSubmit.
  • Replace on_submit_focus with onSubmitFocus.
  • Replace on_submit_blur with onSubmitBlur.
  • Replace on_clear with onClear.
  • Replace on_state_update with onStateUpdate.

Translations

  • Replace Input.submit_button_title with Input.submitButtonTitle.
  • Replace Input.clear_button_title with Input.clearButtonTitle.

SubmitButton (do we need to document this, I don't see any docs of this, but it's exposed/exported)

  • Replace icon_size with iconSize.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.

InputMasked

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • Replace label_direction with labelDirection.
  • Replace number_mask with numberMask.
  • Replace currency_mask with currencyMask.
  • Replace mask_options with maskOptions.
  • Replace number_format with numberFormat.
  • Replace as_currency with asCurrency.
  • Replace as_number with asNumber.
  • Replace as_percent with asPercent.
  • Replace show_mask with showMask.
  • Replace show_guide with showGuide.
  • Replace keep_char_positions with keepCharPositions.
  • Replace placeholder_char with placeholderChar.
  • Replace inner_ref with ref.
  • Replace label_sr_only with labelSrOnly.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace input_state with inputState.
  • Replace submit_button_title with submitButtonTitle.
  • Replace clear_button_title with clearButtonTitle.
  • Replace keep_placeholder with keepPlaceholder.
  • Replace input_class with inputClass.
  • Replace input_attributes with inputAttributes.
  • Replace input_element with inputElement.
  • Replace icon_size with iconSize.
  • Replace icon_position with iconPosition.
  • Replace inner_element with innerElement.
  • Replace submit_element with submitElement.
  • Replace submit_button_variant with submitButtonVariant.
  • Replace submit_button_icon with submitButtonIcon.
  • Replace submit_button_status with submitButtonStatus.
  • Replace selectall with selectAll.

Events

  • Replace on_change with onChange.
  • Replace on_submit with onSubmit.
  • Replace on_focus with onFocus.
  • Replace on_blur with onBlur.
  • Replace on_submit_focus with onSubmitFocus.
  • Replace on_submit_blur with onSubmitBlur.
  • Replace on_state_update with onStateUpdate.

MultiInputMask

Properties

  • Replace label_direction with labelDirection.

FormLabel

Properties

  • Replace for_id with forId.
  • Replace sr_only with srOnly.

Radio

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • The deprecated attributes prop has been removed. Use spread props instead.
  • Replace label_sr_only with labelSrOnly.
  • Replace label_position with labelPosition.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace label_direction with labelDirection.

Events

  • Replace on_change with onChange.
  • Replace on_state_update with onStateUpdate.

Radio.Group

Properties

  • The deprecated attributes prop has been removed. Use spread props instead.
  • Replace label_direction with labelDirection.
  • Replace label_sr_only with labelSrOnly.
  • Replace label_position with labelPosition.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace layout_direction with layoutDirection.

Events

  • Replace on_change with onChange.
  • Replace on_state_update with onStateUpdate.

Textarea

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • The deprecated textareaAttributes prop has been removed. Use spread props instead.
  • Replace label_direction with labelDirection.
  • Replace label_sr_only with labelSrOnly.
  • Replace textarea_state with textareaState.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace autoresize_max_rows with autoResizeMaxRows.
  • Replace autoresize with autoResize.
  • Replace textarea_class with textareaClass.
  • Replace textarea_attributes with textareaAttributes.
  • Replace inner_ref with ref.
  • Replace textarea_element with textareaElement.

Events

  • Replace on_change with onChange.
  • Replace on_focus with onFocus.
  • Replace on_blur with onBlur.
  • Replace on_key_down with onKeyDown.

Accordion

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • The deprecated attributes prop has been removed. Use spread props instead.
  • Replace expandBehaviour with expandBehavior.
  • Replace on_state_update with onStateUpdate.
  • Replace expanded_ssr with expandedSsr.
  • Replace heading_level with headingLevel.
  • Replace icon_size with iconSize.
  • Replace single_container with singleContainer.
  • Replace left_component with leftComponent.
  • Replace flush_remembered_state with flushRememberedState.
  • Replace on_change with onChange.
  • Replace icon_position with iconPosition.
  • Replace prevent_rerender_conditional with preventRerenderConditional.
  • Replace remember_state with rememberState.
  • Replace prevent_rerender with preventRerender.
  • Replace no_animation with noAnimation.

Accordion.Group

Properties

  • Replace allow_close_all with allowCloseAll.
  • Replace expanded_id with expandedId.

Accordion.Provider

Properties

  • Replace expanded_id with expandedId.

Tag

Events

  • Replace onDelete with onClick, and add variant="removable".

Upload

Properties

  • Replace variant="normal" with variant="default".

P

  • Replace class .dnb-p--medium with .dnb-t__weight--medium
  • Replace class .dnb-p--bold with .dnb-t__weight--bold
  • Replace class .dnb-p__size--xx-large with .dnb-t__size--xx-large and .dnb-t__line-height--xx-large
  • Replace class .dnb-p__size--x-large with .dnb-t__size--x-large and .dnb-t__line-height--x-large
  • Replace class .dnb-p__size--large with .dnb-t__size--large and .dnb-t__line-height--large
  • Replace class .dnb-p__size--basis with .dnb-t__size--basis and .dnb-t__line-height--basis
  • Replace class .dnb-p__size--medium with .dnb-t__size--medium and .dnb-t__line-height--medium
  • Replace class .dnb-p--small or .dnb-p__size--small with .dnb-t__size--small and .dnb-t__line-height--small
  • Replace class .dnb-p--x-small or .dnb-p__size--x-small with .dnb-t__size--x-small and .dnb-t__line-height--x-small

Properties

  • Replace medium={true} with weight='medium'.
  • Replace bold={true} with weight='bold'.
  • Replace modifier with appropriate weight and/or size.

Definition lists

Properties

  • Replace direction in <Dl> with layout.

BreadcrumbItem

  • Removed passing down properties to the internal span.

We don't think this has been used for anything other than passing down data-testids for testing. We believe the potential side effects of passing down properties to this span are greater than the advantages it gives for those who want to test this span using data-testid as their way of selecting the span.

We recommend other testing methods to select and test the inner parts of Eufemia components. You could use, e.g., screen.queryByRole or document.querySelector.

For more context, see this PR.

ProgressIndicator

Properties

  • Replace visible with show.
  • Replace no_animation with noAnimation.
  • Replace indicator_label with indicatorLabel.
  • Replace label_direction with labelDirection.
  • Replace show_label with showDefaultLabel.
  • Replace on_complete with onComplete.
  • Replace class with className.
  • Replace children with label.

Styling

  • Replace CSS class dnb-progress-indicator--visible with dnb-progress-indicator--show.

Translations

  • Replace translation ProgressIndicator.indicator_label with ProgressInidicator.indicatorLabel.

PaymentCard

Properties

  • Replace product_code with productCode.
  • Replace card_number with cardNumber.
  • Replace card_status with cardStatus.
  • Replace raw_data with rawData.

Translations

  • Remove translation PaymentCard.text_card_number as it's not supported anymore.

cardStatus property

  • Replace value not_active with notActive.
  • Replace value order_in_process with orderInProcess.
  • Replace value new_order with newOrder.

Translations

  • Replace PaymentCard.text_blocked with PaymentCard.textBlocked.
  • Replace PaymentCard.text_expired with PaymentCard.textExpired.
  • Replace PaymentCard.text_not_active with PaymentCard.textNotActive.
  • Replace PaymentCard.text_new_order with PaymentCard.textNewOrder.
  • Replace PaymentCard.text_order_in_process with PaymentCard.textOrderInProcess.
  • Replace PaymentCard.text_replaced with PaymentCard.textReplaced.
  • Replace PaymentCard.text_renewed with PaymentCard.textRenewed.
  • Replace PaymentCard.text_new with PaymentCard.textNew.
  • Replace PaymentCard.text_unknown with PaymentCard.textUnknown.

Divider (Horizontal Rule)

Properties

  • Remove light and medium as they are not supported anymore.
  • Replace fullscreen with breakout.

Flex.Item

Properties

  • Replace size with span. The property sets how many columns an item should span in the flex layout.

Card

Properties

  • Remove spacing property.
  • Replace size with span (inherited from Flex.Item).
  • The default innerSpace is now small (16px) on all sides.

Checkbox

Properties

  • The deprecated attributes prop has been removed. Use spread props instead.
  • Replace label_position with labelPosition.
  • Replace label_sr_only with labelSrOnly.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace on_change with onChange.
  • Replace children with label.

Switch

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • Replace label_position with labelPosition.
  • Replace label_sr_only with labelSrOnly.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace on_change with onChange.
  • Replace on_change_end with onChangeEnd.
  • Replace on_state_update with onStateUpdate.
  • Replace status_no_animation with statusNoAnimation.

Logo

Properties

  • Remove brand prop. Import and use the desired SVG component directly (e.g., DnbDefault, SbankenDefault, SbankenCompact, SbankenHorizontal, CarnegieDefault, EiendomDefault).
  • Remove variant prop. Instead, import the specific variant directly (e.g., SbankenCompact instead of brand="sbanken" variant="compact").
  • Remove size. Replace it with height if it contains a numeric value, and with inheritSize where size='inherit'.
  • Remove the following properties: alt and ratio.
  • Replace inherit_color with inheritColor.
  • Change width from number to string.
  • Change height from number to string.

Migration Example:

Before (v10):

import { Logo } from '@dnb/eufemia'


render(<Logo brand="sbanken" variant="compact" />)

After (v11):

import { Logo, SbankenCompact } from '@dnb/eufemia/components/Logo'


render(<Logo svg={SbankenCompact} />)

Icon

Properties

  • Replace inherit_color with inheritColor.

Button

Properties

  • The buttonVariantPropType export has been removed as part of the PropTypes removal. If you were importing it via import { buttonVariantPropType } from '@dnb/eufemia/components/button', remove the import — runtime prop validation is no longer provided.
  • Replace icon_position with iconPosition.
  • Replace icon_size with iconSize.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace custom_content with customContent.
  • Replace inner_ref with ref.

Events

  • Replace on_click with onClick.

Modal, Dialog and Drawer

Properties

  • Replace class with className.
  • Replace focus_selector with focusSelector.
  • Replace labelled_by with labelledBy.
  • Replace open_delay with openDelay.
  • Replace content_id with contentId.
  • Replace dialog_title with dialogTitle.
  • Replace close_title with closeTitle.
  • Replace hide_close_button with hideCloseButton.
  • Replace close_button_attributes with closeButtonAttributes.
  • Replace prevent_close with preventClose.
  • Replace prevent_core_style with preventCoreStyle.
  • Replace animation_duration with animationDuration.
  • Replace no_animation with noAnimation.
  • Replace no_animation_on_mobile with noAnimationOnMobile.
  • Replace min_width with minWidth.
  • Replace max_width with maxWidth.
  • Replace align_content with alignContent.
  • Replace container_placement with containerPlacement.
  • Replace vertical_alignment with verticalAlignment.
  • Replace open_state with openState.
  • Replace direct_dom_return with directDomReturn.
  • Replace omit_trigger_button with omitTriggerButton.
  • Replace on_open with onOpen.
  • Replace on_close with onClose.
  • Replace on_close_prevent with onClosePrevent.
  • Replace open_modal with openModal.
  • Replace close_modal with closeModal.
  • Replace trigger_attributes with triggerAttributes.
  • Replace overlay_class with overlayClass.
  • Replace content_class with contentClass.
  • Replace modal_content with modalContent.
  • Replace header_content with headerContent.
  • Replace bar_content with barContent.
  • Replace dialog_role with dialogRole.
  • Replace bypass_invalidation_selectors with bypassInvalidationSelectors.
  • Replace content_ref with contentRef.
  • Replace scroll_ref with scrollRef.
  • Replace prevent_overlay_close with preventOverlayClose.
  • Replace openState with open.
  • Replace openState="opened" with open={true}.
  • Replace openState="closed" with open={false}.
  • Removed: rootId property has been removed. Modal root elements no longer support custom IDs.

Translations

  • Replace Modal.dialog_title with Modal.dialogTitle.
  • Replace Modal.close_title with Modal.closeTitle.

Opening and closing a modal

  • If you rely on opening and closing a modal by mounting and unmounting the component (legacy behavior), you should change to using the open property instead.

Modal.Header, Dialog.Header and Drawer.Header

Properties

  • Replace title_class with titleClass.

ModalHeaderBar, Dialog.Navigation and Drawer.Navigation

Properties

  • Replace shadow_class with shadowClass.

Heading

Properties

  • Replace debug_counter with debugCounter`.
  • Replace skip_correction with skipCorrection`.

Table

Properties

  • Replace accordion with mode="accordion".

Events

  • Replace onClosed with onClose.
  • Replace onOpened with onOpen.

TableClickableHead

Events
  • Replace on_click with onClick.

FormStatus

Properties

  • Replace no_animation with noAnimation.
  • Replace icon_size with iconSize.
  • Replace text_id with textId.
  • Replace width_selector with widthSelector.
  • Replace width_element with widthElement.
  • Replace state's value warn with warning.
  • Replace variant's value flat with plain.

Skeleton

Properties

  • Replace no_animation with noAnimation.
  • Replace aria_busy with ariaBusy.
  • Replace aria_ready with ariaReady.

Translations

  • Replace translation Skeleton.aria_busy with Skeleton.ariaBusy.
  • Replace translation Skeleton.aria_ready with Skeleton.ariaReady.

Tabs

Properties

  • Replace selected_key with selectedKey.
  • Replace content_style with contentStyle.
  • Replace content_spacing with contentSpacing.
  • Replace tab_element with tabElement.
  • Replace tabs_style with tabsStyle.
  • Replace tabs_spacing with tabsSpacing.
  • Replace nav_button_edge with navButtonEdge.
  • Replace preventRerender with preventRerender.
  • Replace on_change with onChange.
  • Replace on_click with onClick.
  • Replace on_mouse_enter with onMouseEnter.
  • Replace on_focus with onFocus.
  • Replace focus_key with focusKey.
  • Replace no_border with noBorder.

Pagination

Properties

  • Replace place_maker_before_content with placeMarkerBeforeContent.
  • Replace startup_page with startupPage.
  • Replace current_page with currentPage.
  • Replace page_count with pageCount.
  • Replace startup_count with startupCount.
  • Replace parallel_load_count with parallelLoadCount.
  • Replace min_wait_time with minWaitTime.
  • Replace use_load_button with useLoadButton.
  • Replace hide_progress_indicator with hideProgressIndicator.
  • Replace set_content_handler with setContentHandler.
  • Replace reset_content_handler with resetContentHandler.
  • Replace reset_pagination_handler with resetPaginationHandler.
  • Replace end_infinity_handler with endInfinityHandler.
  • Replace page_element with pageElement.
  • Replace fallback_element with fallbackElement.
  • Replace marker_element with markerElement.
  • Replace indicator_element with indicatorElement.
  • Replace button_title with buttonTitle.
  • Replace prev_title with prevTitle.
  • Replace next_title with nextTitle.
  • Replace more_pages with morePages.
  • Replace is_loading_text with isLoadingText.
  • Replace load_button_text with loadButton.text.

Events

  • Replace on_change with onChange.
  • Replace on_startup with onStartup.
  • Replace on_load with onLoad.
  • Replace on_end with onEnd.

Translations

  • Replace Pagination.button_title with Pagination.buttonTitle.
  • Replace Pagination.prev_title with Pagination.prevTitle.
  • Replace Pagination.next_title with Pagination.nextTitle.
  • Replace Pagination.more_pages with Pagination.morePages.
  • Replace Pagination.is_loading_text with Pagination.isLoadingText.
  • Replace Pagination.load_button_text with Pagination.loadButtonText.

InfinityLoadButton & InfinityLoadButtonProps

  • Replace on_click with onClick.

Timeline

Translations

  • Replace TimelineItem.alt_label_completed with TimelineItem.altLabelCompleted.
  • Replace TimelineItem.alt_label_current with TimelineItem.altLabelCurrent.
  • Replace TimelineItem.alt_label_upoming with TimelineItem.altLabelUpcoming.

DatePicker

Properties

  • Find correctInvalidDate / correct_invalid_date and remove it. You may rather use Field.Date from Eufemia Forms when using minDate and maxDate, as this has built in validation. Reason for removing this is because we believe it's not good UX, or best practice to automatically change the user input. This often leads to confusion, as what they typed in, magically changes for seemingly no reason. We believe it's better to inform them about the error and let them correct it themselves.
  • Replace start_date with startDate.
  • Replace end_date with endDate.
  • Replace start_month with startMonth.
  • Replace end_month with endMonth.
  • Replace min_date with minDate.
  • Replace max_date with maxDate.
  • Replace mask_order with maskOrder.
  • Replace mask_placeholder with maskPlaceholder.
  • Replace date_format with dateFormat.
  • Replace return_format with returnFormat.
  • Replace hide_navigation with hideNavigation.
  • Replace hide_days with hideDays.
  • Replace only_month with onlyMonth.
  • Replace hide_last_week with hideLastWeek.
  • Replace disable_autofocus with disableAutofocus.
  • Replace enable_keyboard_nav with enableKeyboardNav.
  • Replace show_input with showInput.
  • Replace show_submit_button with showSubmitButton.
  • Replace show_cancel_button with showCancelButton.
  • Replace show_reset_button with showResetButton.
  • Replace submit_button_text with submitButtonText.
  • Replace cancel_button_text with cancelButtonText.
  • Replace reset_button_text with resetButtonText.
  • Replace reset_date with resetDate.
  • Replace first_day with firstDay.
  • Replace label_direction with labelDirection.
  • Replace label_sr_only with labelSrOnly.
  • Replace input_element with inputElement.
  • Replace addon_element with addonElement.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace prevent_close with preventClose.
  • Replace no_animation with noAnimation.
  • Replace align_picker with alignPicker.
  • Replace on_days_render with onDaysRender.
  • Replace on_change with onChange.
  • Replace on_type with onType.
  • Replace on_show with onOpen.
  • Replace on_hide with onClose.
  • Replace on_submit with onSubmit.
  • Replace on_cancel with onCancel.
  • Replace on_reset with onReset.
  • Replace days_between with daysBetween.
  • Replace is_valid with isValid.
  • Replace is_valid_start_date with isValidStartDate.
  • Replace is_valid_end_date with isValidEndDate.
  • Replace the shortcuts property close_on_select with closeOnSelect.
  • Replace opened with open.
  • dateFormat and returnFormat does no longer support the format YYYY-MM-DD, use yyyy-MM-dd instead.

Styling

  • Replace CSS class dnb-date-picker--opened with dnb-date-picker--open.

NumberFormat

Properties

  • Replace omit_rounding with rounding="omit".
  • Replace currency_display with currencyDisplay.
  • Replace currency_position with currencyPosition.
  • Replace always_selectall with alwaysSelectAll.
  • Replace selectall with selectAll.
  • Replace copy_selection with copySelection.
  • Replace clean_copy_value with cleanCopyValue.

Translations

  • Replace NumberFormat.clipboard_copy with NumberFormat.clipboardCopy.
  • Replace NumberFormat.not_available with NumberFormat.notAvailable.

Styling

  • Replace CSS class dnb-number-format--selectall with dnb-number-format--select-all.

StepIndicator

Properties

  • Major redesign of component. There is now only one variant (instead of two).
  • Remove StepIndicatorRenderCallback type. Not needed anymore.

Properties

  • Remove on_item_render. No longer has any other function than each step's title property.
  • Remove step item on_render. No longer has any other function than the title property.
  • Remove sidebarId. No longer has any sidebar. If an id is needed, use the id property.
  • Remove step_title_extended. Only step_title is needed.
  • Replace is_current with isCurrent.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace current_step with currentStep.
  • Replace overview_title with overviewTitle.
  • Replace step_title with stepTitle.
  • Replace current_step with currentStep.
  • Replace hide_numbers with hideNumbers.
  • Replace no_animation with noAnimation.

Translations

  • Replace StepIndicator.overview_title with StepIndicator.overviewTitle.
  • Replace StepIndicator.step_title with StepIndicator.stepTitle.

Events

  • Replace on_change with onChange.
  • Replace on_click with onClick.
  • Replace data.on_click with data.onClick for StepIndicatorItem.

StepItemWrapperProps

  • Removed number as one can only change the render of content inside the button.
  • Removed status as one can only change the render of content inside the button.
  • Removed hideNumbers as can only hide numbers in main component.

StepIndicator.Sidebar

  • Component removed entirely after redesign. The variant that used this component no longer exists.

GlobalError

Properties

  • Replace status with statusCode.
  • Replace code with errorMessageCode.

Translations

  • Replace translation GlobalError.code with GlobalError.errorMessageCode.

ToggleButton

Properties

  • The deprecated onStateUpdate prop has been removed. Use onChange instead.
  • The deprecated attributes prop has been removed from ToggleButton and ToggleButtonGroup. Use spread props instead.
  • Replace icon_position with iconPosition.
  • Replace icon_size with iconSize.
  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace left_component with leftComponent.

Events

  • Replace on_change with onChange.
  • Replace on_state_update with onStateUpdate.

ToggleButton.Group

Properties

  • Replace status_state with statusState.
  • Replace statusState's value warn with warning.
  • Replace status_props with statusProps.
  • Replace status_no_animation with statusNoAnimation.
  • Replace label_direction with labelDirection.
  • Replace label_sr_only with labelSrOnly.
  • Replace left_component with leftComponent.
  • Replace layout_direction with layoutDirection.

Events

  • Replace on_change with onChange.

Tooltip

Properties

  • Replace position with placement to match the Popover API.
  • Replace active with open.
  • Replace forceActive with forceOpen.
  • Replace size="basis" with size="default".

GlobalStatus

Properties

  • Replace icon_size with iconSize.
  • Replace no_animation with noAnimation.
  • Replace hide_close_button with hideCloseButton.
  • Replace close_text with closeText.
  • Replace default_title with defaultTitle.
  • Replace status_anchor_text with statusAnchorText.
  • Replace omit_set_focus with omitSetFocus.
  • Replace omit_set_focus_on_update with omitSetFocusOnUpdate.
  • Replace status_id with statusId.
  • Replace status_anchor_url with statusAnchorUrl.
  • Replace status_anchor_label with statusAnchorLabel.
  • Replace status_id with statusId.
  • Replace buffer_delay with bufferDelay.
  • Replace on_close's status_id with statusId.
  • Replace autoclose with autoClose.
  • Replace autoscroll with autoScroll.

Events

  • Replace on_adjust with onAdjust.
  • Replace on_open with onOpen.
  • Replace on_show with onShow.
  • Replace on_hide with onHide.
  • Replace on_close with onClose.

Translations

  • Replace translation GlobalStatus.close_text with GlobalStatus.closeText.
  • Replace translation GlobalStatus.default_title with GlobalStatus.defaultTitle.
  • Replace translation GlobalStatus.status_anchor_text with GlobalStatus.statusAnchorText.

GlobalStatusController

  • Replace remove_on_unmount with removeOnUnmount.

GlobalStatus.create

Properties
  • Replace status_id with statusId.
Events
  • Replace on_show with onShow.
  • Replace on_hide with onHide.
  • Replace on_close with onClose.

GlobalStatus.Remove

Properties
  • Replace status_id with statusId.
  • Replace buffer_delay with bufferDelay.
Events
  • Replace on_show with onShow.
  • Replace on_hide with onHide.
  • Replace on_close with onClose.

GlobalStatus.Add

Properties
  • Replace status_id with statusId.
Events
  • Replace on_show with onShow.
  • Replace on_hide with onHide.
  • Replace on_close with onClose.

GlobalStatus.Update

Properties
  • Replace status_id with statusId.
Events
  • Replace on_show with onShow.
  • Replace on_hide with onHide.
  • Replace on_close with onClose.

CopyOnClick

Translations

  • Replace CopyOnClick.clipboard_copy with CopyOnClick.clipboardCopy.

Layout

Space

Properties

  • Replace no_collapse with noCollapse.

Flex

Properties

  • Replace spacing with gap on all Flex components.
  • rowGap no longer accepts value true. Replace true with undefined or remove the property to get the same behavior.

Removal of FormRow and FormSet

For more information on how to replace these, see FormSet/FormRow deprecation.

  • Replace <FormRow> with <Flex.Horizontal align="baseline">.
  • Replace <FormRow vertical> with <Flex.Vertical>.
  • Replace <FormRow centered> with <Flex.Horizontal align="center">.
  • Replace FormRow= with formElement=.
  • Replace FormRow: with formElement:.
  • Replace import { includeValidProps } from '@dnb/eufemia/components/form-row/FormRowHelpers' with import { pickFormElementProps } from '@dnb/eufemia/shared/helpers/filterValidProps'.
  • Replace import { prepareFormRowContext } from '@dnb/eufemia/components/form-row/FormRowHelpers' with import { prepareFormElementContext } from '@dnb/eufemia/shared/helpers/filterValidProps'.

If you migrate a FormSet that relied on a native browser submit, such as method="post" with an action, you can use preventDefaultOnSubmit={false} on Form.Handler to keep the native submit behavior.

Helpers

Component helpers

Properties

  • Remove extendGracefully, it no longer exists.

Removed helper functions

The following functions have been removed from @dnb/eufemia/shared/component-helper:

  • isTrue – Checked if a value was truthy by comparing String(value) === 'true' || String(value) === '1'. Replace with direct boolean checks (e.g. value === true or simply value).
  • toCamelCase – Converted snake_case strings to camelCase.
  • toSnakeCase – Converted PascalCase strings to snake_case.
  • matchAll – Polyfill for String.matchAll(). Use the native String.matchAll() instead.

The following functions have been removed from @dnb/eufemia/shared/helpers:

  • insertElementBeforeSelection – Unused helper for inserting DOM elements before a text selection.
  • convertStatusToStateOnly – Trivial helper. Replace convertStatusToStateOnly(status, state) with status ? state : null.

The following functions have been removed from @dnb/eufemia/shared/helpers:

  • isEdge / IS_EDGE – Edge is now Chromium-based, making these detections obsolete.

Removed HOCs and conversion utilities

The following Higher-Order Components (HOCs), conversion functions, and types have been removed:

  • withCamelCaseProps – HOC that converted snake_case props to camelCase.
  • withSnakeCaseProps – HOC that converted camelCase props to snake_case.
  • classWithSnakeCaseProps – Class-based HOC that converted camelCase props to snake_case.
  • convertCamelCasePropsToSnakeCase – Converted camelCase props to snake_case.
  • convertSnakeCaseProps – Converted snake_case props to camelCase.

The following TypeScript types have also been removed:

  • ToCamelCase, ToCamelCasePartial, ToCamelCaseFlat, ToCamelCasePartialFlat, IncludeCamelCase
  • ToSnakeCase, ToSnakeCasePartial, IncludeSnakeCase
  • AssertNoMissing, KeysWithUnderscore

These were previously used to support dual snake_case/camelCase prop naming. Since v11 uses camelCase exclusively, they are no longer needed.

Updated SCSS mixin: IS_FF

The IS_FF() SCSS mixin now uses @supports (-moz-appearance: none) instead of the deprecated @-moz-document url-prefix() hack. No changes needed if you use the mixin — it works the same way.

Eufemia Forms

General

  • Form.Card no longer enables outset by default.
  • Card.Provider / Form.Card.Provider has been removed (including disableCardBreakout).
  • Replace Form.useErrorMessage with your error messages as an object in the errorMessages property (e.g., with a useMemo hook).
  • Replace Form.useError with Form.useValidation.
  • Replace Form.useLocale with Form.useLocation.
  • Replace internal.error with error.
  • Replace Form.Iterate label variable {itemNr} with {itemNo}.
  • Replace Form.FieldProps with Field.Provider.
  • Replace <Card stack>...</Card> with <Form.Card>...</Form.Card>.
  • Replace <Card>...</Card> with <Form.Card>...</Form.Card>.
  • Removed automatic horizontal card-content alignment for Form.MainHeading and Form.SubHeading when placed above a card.
  • Replace StepsLayout with Wizard.Container.
  • Replace StepsLayout.Step with Wizard.Step.
  • Replace StepsLayout.NextButton with Wizard.Buttons.
  • Replace StepsLayout.PreviousButton with Wizard.Buttons.
  • Replace StepsLayout.Buttons with Wizard.Buttons.
  • Replace StepsLayout.useStep with Wizard.useStep.
  • Replace Iterate.ArrayPushButton with Iterate.PushButton.
  • Replace Iterate.ArrayRemoveElementButton with Iterate.RemoveButton.

Docs: Eufemia Forms

Ajv no longer shipped by default

Breaking Change: Ajv is no longer included as a dependency in Eufemia Forms v11. This reduces bundle size for applications that don't use JSON Schema validation.

Migration Required: If you use JSON Schema validation with Ajv, you must:

Update your imports and usage:

Before (v10):

import { Form, Field, JSONSchema } from '@dnb/eufemia/extensions/forms'


const schema: JSONSchema = {
  type: 'object',
  properties: {
    myField: { type: 'string', minLength: 3 },
  },
  required: ['myField'],
}


function MyApp() {
  return (
    <Form.Handler schema={schema}>
      <Field.String path="/myField" label="Label" />
    </Form.Handler>
  )
}

After (v11):

import {
  Form,
  Field,
  JSONSchema,
  makeAjvInstance,
} from '@dnb/eufemia/extensions/forms'


const ajvInstance = makeAjvInstance()
const schema: JSONSchema = {
  type: 'object',
  properties: {
    myField: { type: 'string', minLength: 3 },
  },
  required: ['myField'],
}


function MyApp() {
  return (
    <Form.Handler schema={schema} ajvInstance={ajvInstance}>
      <Field.String path="/myField" label="Label" />
    </Form.Handler>
  )
}

Alternative: Consider using Zod schemas instead, which provide better TypeScript integration and are included by default:

import { Form, Field, z } from '@dnb/eufemia/extensions/forms'


const schema = z.object({
  myField: z.string().min(3),
})


function MyApp() {
  return (
    <Form.Handler schema={schema}>
      <Field.String path="/myField" label="Label" />
    </Form.Handler>
  )
}

InputPassword moved to Field.Password

The InputPassword component has been moved to Field.Password, and is now a part of Eufemia Forms. Change your import statement from import InputPassword from '@dnb/eufemia/components/input/InputPassword' to import { Field } from '@dnb/eufemia/extensions/forms'.

Docs: Input, All Fields

Error handling

FormError

validationRule

// From
new FormError('Invalid value', {
  validationRule: 'pattern',
})


// To
new FormError('Field.errorPattern')
  • Remove the validationRule parameter in favor of a translation key, like so: new FormError('Field.errorRequired').

errorMessages object

// From
const errorMessages = {
  pattern: 'Show this when "pattern" fails!',
}


// To
const errorMessages = {
  'Field.errorPattern': 'Show this when "pattern" fails!',
}
  • Replace required with Field.errorRequired.
  • Replace pattern with Field.errorPattern.
  • Replace minLength with StringField.errorMinLength.
  • Replace maxLength with StringField.errorMaxLength.
  • Replace minimum with NumberField.errorMinimum.
  • Replace maximum with NumberField.errorMaximum.
  • Replace exclusiveMinimum with NumberField.errorExclusiveMinimum.
  • Replace exclusiveMaximum with NumberField.errorExclusiveMaximum.
  • Replace multipleOf with NumberField.errorMultipleOf.

useErrorMessage

  • Removed. Provide your error messages as an object in the errorMessages property (e.g., with a useMemo hook).

See also: Form error messages, useValidation

Form.Visibility

  • Replace continuousValidation with validateContinuously.
  • Replace withValue with hasValue.
  • Replace pathValue with using visibleWhen.
  • Replace whenValue with using visibleWhen.

Every Field.* component

Properties

  • Replace continuousValidation with validateContinuously.
  • Replace validator with onChangeValidator.
  • Replace focusWhenOpen with focusOnOpen.

Docs: All Fields

Field.Date

Properties

  • Replace opened with open.

onType event

  • Replace start_date with startDate.
  • Replace end_date with endDate.
  • Replace is_valid with isValid.

Styling

  • Replace CSS class dnb-date-picker--opened with dnb-date-picker--open.

Field.PhoneNumber

Translations

  • Replace PhoneNumber.label translation string with PhoneNumber.numberLabel.

Field.PostalCodeAndCity

Properties

  • Replace country with countryCode.

Field.Selection

Properties

  • The radio-list variant has been removed. Use List with variant="radio" for custom list-based radio layouts (example).

autocompleteProps property

See docs about changed Autocomplete properties

dropdownProps property

See docs about changed Dropdown properties

data property

  • Replace selected_value with selectedValue.
  • Replace suffix_value with suffixValue.
  • Replace search_content with searchContent.
  • Replace class_name with className.

Field.Password

Properties

  • Replace property show_password with translation Password.ariaLabelShow.
  • Replace property hide_password with translation Password.ariaLabelHide.

Events

  • Replace on_show_password with onShowPassword.
  • Replace on_hide_password with onHidePassword.

Iterate.PushContainer

Properties

  • Replace requireCommit with preventUncommittedChanges.

Wizard.Container

Properties

  • Remove variant. No longer has any variants.
  • Remove scrollTopOnStepChange, as it's now enabled by default. You can disable it with omitScrollManagement.
  • Remove sidebarId. No longer has any sidebar. If an id is needed, use the id property.

Wizard.Provider

The Wizard.Provider export has changed. It now points to the WizardContext object itself instead of WizardContext.Provider, aligning with the React 19 deprecation of <Context.Provider>.

The JSX usage (<Wizard.Provider value={...}>) remains the same — no changes needed in your templates. However, if you reference Wizard.Provider programmatically (e.g., identity checks against WizardContext.Provider), be aware that it is now the context object itself.

Wizard.Step

Properties

  • Replace active with include.
  • Replace activeWhen with includeWhen.

DataContext.Provider

Properties

  • Replace filterSubmitData with rather using the filterData in the second event parameter in the onSubmit or onChange events.

SCSS: @import → @use

Eufemia's internal SCSS has been migrated from the deprecated @import to the Sass module system (@use / @forward). This does not change the compiled CSS output, but affects consumers who import Eufemia's SCSS source files directly.

If you import Eufemia's SCSS utilities (e.g. for mixins or breakpoints), update your imports:

Before:

@import '@dnb/eufemia/style/core/utilities.scss';


@include allBelow(small) {
  // ...
}


div {
  max-width: map-get($breakpoints, medium);
}

After:

@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


@include utilities.allBelow(small) {
  // ...
}


div {
  max-width: map-get(utilities.$breakpoints, medium);
}

Using @import with Eufemia's SCSS source files still works, but will trigger Sass deprecation warnings. We recommend migrating to @use.

If you previously had silenceDeprecations: ['import'] in your Sass config to suppress warnings from Eufemia, you can now remove it — Eufemia's own files no longer use @import.

Theming

  • Replace import from path style/themes/theme-ui/ with style/themes/ui/
  • Replace import from path style/themes/theme-sbanken/ with style/themes/sbanken/
  • Replace import from path style/themes/theme-eiendom/ with style/themes/eiendom/
  • Replace import from path style/themes/theme-carnegie/ with style/themes/carnegie/

January 23, 2026