#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:

#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

#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 innerRef.

#Anchor

• When using icons in an Anchor (text link), use the icon property instead of inlining it.
• Find and remove scrollToHashHandler. Smooth hash scrolling is now supported by all major browsers.

#FormLabel

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

#Tag

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

#Definition lists

• 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

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

#PaymentCard

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

#Divider (Horizontal Rule)

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

#Checkbox

• Replace label_position with labelPosition.
• Replace label_sr_only with labelSrOnly.
• Replace status_state with statusState.
• Replace status_props with statusProps.
• Replace on_change with onChange.
• Replace children with label.

#Switch

• Replace label_position with labelPosition.
• Replace label_sr_only with labelSrOnly.
• Replace status_state with statusState.
• 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

• 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.

#Button

• Replace class with className.

#Modal, Dialog and Drawer

• Replace class with className.

#Table

• Replace accordion with mode="accordion".

#Pagination

• Replace place_maker_before_content with place_marker_before_content.

#DatePicker

• Find correctInvalidDate and remove it. You may rather use Field.Date from Eufemia Forms when using minDate and maxDate.

#NumberFormat

• Replace omit_rounding with rounding="omit".

#DrawerList

• 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'.

#StepIndicator

• Major redesign of component. There is now only one variant (instead of two).
• 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.

#StepIndicator.Sidebar

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

#GlobalError

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

#Layout

#Flex

• 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'.

Docs: FormRow, FormSet

#Eufemia Forms

#General

• Replace useError with useValidation.
• 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>.

Docs: Eufemia Forms

#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.

#Every Field.* component

• Replace continuousValidation with validateContinuously.

Docs: All Fields

#Field.PostalCodeAndCity

• Replace country with countryCode.

#Iterate.PushContainer

• Replace requireCommit with preventUncommittedChanges.

#Wizard.Container

• Remove variant. No longer has any variants.
• Remove sidebarId. No longer has any sidebar. If an id is needed, use the id property.

#Wizard.Step

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

November 14, 2025