#v11

This is the migration guide for @dnb/eufemia v11. It covers all breaking changes, removals, and required code updates.

Start here → Follow the Step-by-step migration procedure for a structured, phase-by-phase migration workflow covering all 8 phases. The reference sections below provide details for each step.

How to use this guide: Start with the Step-by-step migration procedure for the ordered workflow. Reference the per-component sections to find individual property renames for a specific component. Check Silent failures TypeScript won't catch after applying changes.

Using AI to migrate? Set up the Eufemia MCP server to give your AI agent access to the full v11 API documentation alongside this migration guide.

Most changes fall into these categories:

1. snake_case → camelCase renames — The majority of changes are mechanical property, event, and translation key renames. These can be automated.
2. React 19 alignment — innerRef → ref, Context.Provider → Context, and related updates.
3. Behavioral changes and removals — API redesigns, removed features, and changed defaults. These require manual review.

#Summary of changes

• React 19 required — v11 requires React and React DOM v19.
• IE and Edge (EdgeHTML) no longer supported — All IE- and legacy-Edge-specific CSS rules have been removed from the CSS reset and component styles. Only modern evergreen browsers (Chrome, Firefox, Safari, Chromium-based Edge) are supported.
• All snake_case (on_click) events and properties have been converted to camelCase (onClick). The reason for previously using snake_case was to support Web Components – but the support was discontinued in v10.
• labelDirection default changed to vertical — Labels render above the input by default. If you relied on horizontal labels, set labelDirection="horizontal" explicitly. See labelDirection.
• FormRow and FormSet removed — Replace with Flex layout components. See Removal of FormRow and FormSet.
• InputMasked engine replaced — Switched from text-mask to Maskito. Custom masks using createNumberMask or emailMask must be updated. See InputMasked.
• Logo API redesigned — The brand/variant props are replaced with an svg prop import pattern. See Logo.
• StepIndicator redesigned — The sidebar mode has been removed. See StepIndicator.
• Ajv no longer auto-instantiated — Ajv is still a dependency, but is no longer automatically instantiated. If you use JSON Schema validation, you must explicitly create and provide an Ajv instance. See Ajv no longer auto-instantiated.
• Dropdown actionMenu/moreMenu removed — The actionMenu and moreMenu props on Dropdown have been removed. Use the new Menu component instead.
• NumberFormat split into variants — The generic <NumberFormat /> component and format() utility have been removed. Use variant sub-components like <NumberFormat.Number />, <NumberFormat.Currency />, etc. See NumberFormat.
• date-fns upgraded from v2 to v4 — If you import date-fns functions directly (e.g. for DatePicker's locale prop), update your imports to use named exports. See DatePicker.
• Replaced deprecated <Context.Provider> with direct <Context> rendering across all internal context providers (React 19).
• Several exported TypeScript interface declarations have been converted to type. This prevents declaration merging but has no impact on standard usage.
• All React context value types have been renamed to use a consistent ...ContextValue suffix (e.g. AccordionContextProps → AccordionContextValue). See TypeScript for the full list.
• Event handler and render function prop types have been replaced with properly typed signatures (e.g. (...args: any[]) => any → (event: AccordionChangeEvent) => void). See Typed event handlers for the full list.

#New in v11

These components are new in v11:

• Menu — A context menu component that replaces Dropdown's actionMenu and moreMenu props. Supports Menu.Button, Menu.List, Menu.Action, Menu.Accordion, Menu.Header, and Menu.Divider sub-components.
• List — A layout component for displaying structured lists with support for icons, titles, content, and accordion behavior.

#v10 support timeline

After the v11 release, v10 will continue to receive critical bug fixes and security patches for 6 months. During this period:

• Critical bugs and security vulnerabilities will be patched in v10.
• New features will only be added to v11.
• Non-critical bug fixes will only target v11.

After the 6-month window, v10 will no longer receive updates. We recommend starting your migration early to avoid last-minute pressure.

#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

#Migration

v11 of @dnb/eufemia contains breaking changes.

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

#Automated migration: snake_case to camelCase

The largest category of changes in v11 is the rename of all snake_case properties, events, and translation keys to camelCase. This affects every component and can be automated.

The pattern:

• Properties: selected_key → selectedKey, label_direction → labelDirection
• Events: on_change → onChange, on_click → onClick
• Translations: Autocomplete.no_options → Autocomplete.noOptions

You can use your editor's find-and-replace to handle most of these. Since each snake_case property maps to a specific camelCase name, we recommend using the per-component lists below rather than a generic regex.

Note: Some renames are not just snake_case conversions — they also change the name itself (e.g. triangle_position → arrowPosition, opened → open, on_show → onOpen). These are listed individually per component below and require manual attention.

The rest of this section covers changes that cannot be automated with a simple find-and-replace and need manual review.

#Migration effort levels

To help plan your migration, changes are grouped by effort:

Automated (find-and-replace):

• All snake_case → camelCase property, event, and translation key renames
• innerRef → ref
• <Context.Provider> → <Context>

Semi-automated (value renames — find-and-replace with care):

• Status value 'info' → 'information' (applies to state, statusState, variant, confirmType)
• Status value 'warn' → 'warning' (applies to statusState)
• opened → open on Autocomplete, Dropdown, DrawerList, DatePicker, Tooltip, Field.Date
• on_show → onOpen and on_hide → onClose on Autocomplete, Dropdown, DrawerList, DatePicker
• prerender → keepInDOM on Tabs, Accordion
• styleType / style_type → backgroundColor on Breadcrumb, Dialog.Body, Drawer.Body

Manual review required:

• InputMasked masking engine replacement (text-mask → Maskito)
• StepIndicator redesign (sidebar variant removed)
• DatePicker behavioral changes (segment elements, format strings, focus events)
• Logo API redesign (brand/variant → svg prop)
• Ajv no longer auto-instantiated
• FormRow and FormSet removal
• Card visual changes (outline, border-radius, default innerSpace)
• Button variant="signal" removal

#Semantic renames (not just casing)

These renames change the property or event name itself, not just the casing. They affect multiple components and require targeted find-and-replace:

#Import path changes

All import paths that changed or were removed in v11. Update these before changing component APIs — your app won't compile until these are fixed.

#Common migration mistakes

These changes look simple but are easy to get wrong. Pay special attention to these:

#spacing → innerSpace requires an object, not a string

The spacing prop accepted a string like "large". The replacement innerSpace requires an object with a block key to match the same vertical-only padding behavior. Using innerSpace="large" (plain string) applies padding on all four sides, which will break your layout.

Wrong:

<Section innerSpace="large">Content</Section>

Correct:

<Section innerSpace={{ block: 'large' }}>Content</Section>

This applies to Section, Dialog.Body, and Drawer.Body.

#on_show / on_hide → onOpen / onClose is NOT just a casing change

The event names changed semantically. A naive snake_case→camelCase conversion would produce onShow / onHide, which are wrong.

Affected components: Autocomplete, Dropdown, DrawerList, DatePicker. The _focus variants only apply to Dropdown.

Note: GlobalStatus still uses onShow / onHide — those are correct for that component and did not change semantically.

#Component-specific props — don't apply globally

These renames only apply to specific components. Do not find-and-replace them across the entire codebase:

#FormRow / FormSet references in context providers

When replacing FormRow, be careful not to just rename the JSX tag. The context provider pattern also changed:

#Cross-component prop patterns

These snake_case props appear on many components and follow the same rename pattern everywhere. Apply these as global find-and-replace within Eufemia component JSX:

Status value renames — apply to all components that accept statusState or state:

CSS class renames — apply wherever these CSS classes are referenced:

#Step-by-step migration procedure

Follow these steps in order. Steps in Phase 1 are safe to apply as global find-and-replace across your entire codebase. Steps in later phases require scoping or manual review.

#Phase 1: Global find-and-replace (safe across entire codebase)

These renames only exist as Eufemia prop/event names and won't collide with other libraries:

1. Replace all snake_case props and events with their camelCase equivalents. Use the per-component lists in the Components section below. The most common ones: on_change → onChange, on_click → onClick, status_state → statusState, label_direction → labelDirection, label_sr_only → labelSrOnly, no_animation → noAnimation, icon_size → iconSize, icon_position → iconPosition.
2. Replace innerRef with ref on all Eufemia components.
3. Replace <Context.Provider> with <Context> when using Eufemia contexts directly.
4. Replace the status value 'info' with 'information' (applies to state, statusState, variant, confirmType).
5. Replace the status value 'warn' with 'warning' (applies to statusState).
6. Replace input_class (or inputClass) with inputClassName on Input and InputMasked.
7. Replace textarea_class (or textareaClass) with textareaClassName on Textarea.

#Phase 2: Targeted find-and-replace (scope to specific components)

These renames use generic names that exist in non-Eufemia code. Scope your find-and-replace to JSX using the affected component:

8. Replace opened with open — only on Autocomplete, Dropdown, DrawerList, DatePicker, Tooltip, Field.Date.
9. Replace on_show with onOpen and on_hide with onClose — only on Autocomplete, Dropdown, DrawerList, DatePicker. (Not just a casing change — the name changed semantically. GlobalStatus still uses onShow/onHide.)
10. Replace triangle_position with arrowPosition — only on Autocomplete, Dropdown, DrawerList.
11. Replace clear with showClearButton — only on Input, InputMasked.
12. Replace isCollapsed with collapsed — only on Breadcrumb.
13. Replace visible with show — only on ProgressIndicator.
14. Replace position with placement — only on Tooltip.
15. Replace children with label — only on Checkbox, ProgressIndicator.
16. Replace active or forceOpen with open — only on Tooltip.
17. Replace as with element — only on H (heading element).
18. Replace size with span — only on Flex.Item, Card.
19. Replace input_icon with icon — only on Autocomplete.
20. Replace accordion with mode="accordion" — only on Table.
21. Replace prerender with keepInDOM — only on Tabs, Accordion.
22. Replace styleType (or style_type) with backgroundColor — only on Breadcrumb, Dialog.Body, Drawer.Body.
23. Replace contentSpacing with contentInnerSpace and tabsSpacing with tabsInnerSpace — only on Tabs.

#Phase 3: Structural and visual changes (require code modification or review)

24. Visual review: The labelDirection default has changed to vertical. If your layouts relied on horizontal labels, add labelDirection="horizontal" explicitly. See labelDirection default changed to vertical.
25. Visual review: Card outline, border-radius, and default innerSpace have changed. Review your Card layouts. See Card.
26. Replace spacing with innerSpace={{ block: 'value' }} on Section, Dialog.Body, Drawer.Body. Do NOT use innerSpace="large" — it must be an object. See Section.
27. Replace Theme.Provider with Theme.Context and darkBackground with surface="dark". See Theme.Provider → Theme.Context.
28. Replace <FormRow> with <Flex.Horizontal align="baseline"> and <FormRow vertical> with <Flex.Vertical>. Replace FormRow= with formElement= in Provider config. See Removal of FormRow and FormSet.
29. Replace openState="opened" with open={true} and openState="closed" with open={false} on Modal/Dialog/Drawer.
30. Update dateFormat and returnFormat strings: YYYY → yyyy, DD → dd on DatePicker.
31. Replace Stat.Amount with Stat.Number, Stat.Info variant="default" with variant="plain".
32. Replace Logo brand/variant props with svg prop import pattern. See Logo.

#Phase 4: Import path and module changes

33. Update all changed import paths. See Import path changes.
34. If using Ajv with JSON Schema validation, add ajvInstance={makeAjvInstance()} to Form.Handler. See Ajv no longer auto-instantiated.
35. Replace InputPassword import with Field.Password from Eufemia Forms. See InputPassword moved to Field.Password.
36. Replace StepsLayout with Wizard.Container, StepsLayout.Step with Wizard.Step, etc.

#Phase 5: SCSS changes

37. If you import Eufemia SCSS source files with @import, replace with @use and namespace your calls. See SCSS: @import → @use.
38. Rename all SCSS mixin references to camelCase. See SCSS mixin renames.
39. Remove extendFocusRing and componentReset SCSS mixin calls — they have been deleted.

#Phase 6: TypeScript type updates

40. Update any imported context value types (AccordionContextProps → AccordionContextValue, etc.). See TypeScript.
41. Update any Props type imports (Props → component-prefixed name). See Props Type Exports.
42. Update event handler types to match new typed signatures. See Typed event handlers.

#Phase 7: Eufemia Forms behavioral changes

43. Replace validator with onChangeValidator on all Field components.
44. Replace continuousValidation with validateContinuously on all Field components.
45. Update errorMessages object keys: required → Field.errorRequired, pattern → Field.errorPattern, etc. See Error handling.
46. Replace Form.useError with Form.useValidation, Form.useLocale with Form.useTranslation.
47. Replace Form.Visibility props: withValue → hasValue, pathValue/whenValue → visibleWhen.
48. Replace Form.FieldProps with Field.Provider.
49. Replace <Card stack> with <Form.Card> and <Card> (inside forms) with <Form.Card>.
50. Replace Iterate.ArrayPushButton with Iterate.PushButton and Iterate.ArrayRemoveElementButton with Iterate.RemoveButton.
51. Replace requireCommit with preventUncommittedChanges on Iterate.PushContainer.
52. Replace active with include and activeWhen with includeWhen on Wizard.Step.
53. Replace Form.Iterate label variable {itemNr} with {itemNo}.
54. Review all remaining changes in the Eufemia Forms section.

#Phase 8: Verify

55. Run npx tsc --noEmit to catch remaining type errors.
56. Run your tests. Update any test selectors that query DatePicker/Expiry input elements (now role="spinbutton" sections).
57. Search for remaining snake_case patterns using the grep command in Verifying your migration.

#Find-and-replace safety guide

Safe for global find-and-replace — these prop names are Eufemia-specific and won't collide with other code:

on_change, on_click, on_focus, on_blur, on_submit, on_key_down, on_type, on_select, on_clear, on_open, on_close, on_cancel, on_reset, on_complete, on_resize, on_end, on_load, on_startup, on_adjust, on_days_render, on_submit_focus, on_submit_blur, status_state, status_props, status_no_animation, label_direction, label_sr_only, label_position, icon_size, icon_position, no_animation, inner_ref, selected_key, default_value, prevent_selection, prevent_close, keep_open, independent_width, fixed_position, enable_body_lock, skip_portal, cache_hash, no_scroll_animation, min_height, max_height, input_element, submit_element, submit_button_title, submit_button_icon, submit_button_variant, clear_button_title, keep_placeholder, input_attributes, inner_element.

Note: on_state_update is not in this list because it has been removed, not renamed. If you used on_state_update, replace it with onChange instead.

Must be scoped to specific components — these names exist outside Eufemia or overlap across components with different meanings:

#Verifying your migration

After applying changes, use these commands to validate:

TypeScript check — catches missed renames, wrong prop types, and removed APIs:

npx tsc --noEmit

Search for remaining snake_case — catches props you missed:

grep -rn 'on_\|status_\|label_\|icon_\|_class\b\|inner_ref\|_state\|_position\|_button\|_text\|_sr_' \
  --include='*.tsx' --include='*.ts' src/

Note: This grep only catches snake_case patterns. Semantic renames like opened → open, prerender → keepInDOM, clear → showClearButton, and expandBehaviour → expandBehavior require manual review using the Semantic renames table.

Common TypeScript errors and what they mean:

#Silent failures TypeScript won't catch

TypeScript catches most v10 → v11 errors, but these three categories compile without errors and fail silently at runtime. You must search for them manually after migration.

#1. Data object property renames

Dropdown, Autocomplete, DrawerList, and Field.Selection accept data arrays with objects. The DrawerListDataArrayObject type allows arbitrary keys ([key: string]: any), so TypeScript will not flag old snake_case property names. The component simply won't find the values it expects.

Compiles but broken:

<Dropdown
  data={[
    { selected_key: 'no', content: 'Norway' }, // silent failure
    { selected_key: 'se', content: 'Sweden' }, // silent failure
  ]}
/>

Correct:

<Dropdown
  data={[
    { selectedKey: 'no', content: 'Norway' },
    { selectedKey: 'se', content: 'Sweden' },
  ]}
/>

Search for old data property names:

grep -rn 'selected_key\|selected_value\|suffix_value\|search_content\|class_name' \
  --include='*.tsx' --include='*.ts' src/

#2. Event callback return object renames

Several components renamed properties on the objects passed to event callbacks. If you destructure the old property names, the values will be undefined at runtime with no TypeScript error (because callback parameter types are often inferred loosely).

DatePicker onChange return object:

Field.Date onType return object:

Search for old callback property access:

grep -rn 'days_between\|is_valid\|is_valid_start_date\|is_valid_end_date\|start_date\|end_date' \
  --include='*.tsx' --include='*.ts' src/

#3. CSS class selectors in strings and tests

CSS class names used in querySelector, test assertions, or CSS/SCSS files are plain strings that TypeScript cannot validate.

Search for all renamed CSS classes:

grep -rn 'dnb-autocomplete--opened\|dnb-dropdown--opened\|dnb-drawer-list--opened\|dnb-date-picker--opened\|dnb-progress-indicator--visible\|dnb-anchor--contrast\|dnb-number-format--selectall\|dnb-section--spacing' \
  --include='*.tsx' --include='*.ts' --include='*.scss' --include='*.css' src/

Also check DatePicker/Expiry test selectors — the visible date segments changed from native input elements to role="spinbutton" sections:

// Before (v10) — queried native input elements
document.querySelector('.dnb-date-picker input')

// After (v11) — use role-based selectors
document.querySelector('[role="spinbutton"]')
// or
document.querySelector('.dnb-segmented-field__section')

#4. Theme darkMode prop silently ignored

The darkMode prop on Theme was replaced with colorScheme. Passing darkMode compiles without error but is silently ignored. The CSS class also changed from eufemia-theme__dark-mode to eufemia-theme__color-scheme--dark.

Search for old usage:

grep -rn 'darkMode\|eufemia-theme__dark-mode' \
  --include='*.tsx' --include='*.ts' --include='*.scss' --include='*.css' src/

#5. Provider locales prop silently ignored

The locales prop on Provider and Context was removed in favor of translations. Passing locales compiles without error but is silently ignored, meaning your custom translations will not be applied.

Search for old usage:

grep -rn 'locales=' --include='*.tsx' --include='*.ts' src/

#Complete migration example

This example shows a realistic v10 component migrated to v11, combining multiple change categories:

Before (v10):

import {
  Input,
  Dropdown,
  DatePicker,
  Section,
  Button,
  FormRow,
} from '@dnb/eufemia'
import { Provider } from '@dnb/eufemia/shared'

function MyForm({ formRef }) {
  return (
    <Provider FormRow={{ label_direction: 'vertical' }}>
      <Section spacing="large" style_type="white">
        <FormRow>
          <Input
            label="Name"
            on_change={({ value }) => console.log(value)}
            status="Error message"
            status_state="error"
            innerRef={formRef}
          />
          <Dropdown
            label="Country"
            selected_key="no"
            on_change={({ data }) => console.log(data)}
            opened={false}
            on_show={() => console.log('opened')}
            on_hide={() => console.log('closed')}
            triangle_position="left"
            data={[
              { selected_key: 'no', content: 'Norway' },
              { selected_key: 'se', content: 'Sweden' },
            ]}
          />
          <DatePicker
            label="Start date"
            date_format="YYYY/MM/DD"
            return_format="YYYY-MM-DD"
            on_change={({ date }) => console.log(date)}
            on_show={() => console.log('shown')}
            on_hide={() => console.log('hidden')}
          />
        </FormRow>
        <Button variant="signal" on_click={() => console.log('submit')}>
          Submit
        </Button>
      </Section>
    </Provider>
  )
}

After (v11):

import {
  Input,
  Dropdown,
  Flex,
  DatePicker,
  Section,
  Button,
} from '@dnb/eufemia'
import { Provider } from '@dnb/eufemia/shared'

function MyForm({ formRef }) {
  return (
    <Provider formElement={{ labelDirection: 'vertical' }}>
      <Section innerSpace={{ block: 'large' }} backgroundColor="white">
        <Flex.Horizontal align="baseline">
          <Input
            label="Name"
            onChange={({ value }) => console.log(value)}
            status="Error message"
            statusState="error"
            ref={formRef}
          />
          <Dropdown
            label="Country"
            selectedKey="no"
            onChange={({ data }) => console.log(data)}
            open={false}
            onOpen={() => console.log('opened')}
            onClose={() => console.log('closed')}
            arrowPosition="left"
            data={[
              { selectedKey: 'no', content: 'Norway' },
              { selectedKey: 'se', content: 'Sweden' },
            ]}
          />
          <DatePicker
            label="Start date"
            dateFormat="yyyy/MM/dd"
            returnFormat="yyyy-MM-dd"
            onChange={({ date }) => console.log(date)}
            onOpen={() => console.log('shown')}
            onClose={() => console.log('hidden')}
          />
        </Flex.Horizontal>
        <Button variant="primary" onClick={() => console.log('submit')}>
          Submit
        </Button>
      </Section>
    </Provider>
  )
}

What changed (13 categories in one component):

1. FormRow → Flex.Horizontal align="baseline" (removed component)
2. FormRow={{ label_direction: 'vertical' }} → formElement={{ labelDirection: 'vertical' }} (Provider config)
3. spacing="large" → innerSpace={{ block: 'large' }} (structural change — object required)
4. style_type="white" → backgroundColor="white" (semantic rename)
5. on_change / on_click → onChange / onClick (snake_case → camelCase)
6. status_state → statusState (snake_case → camelCase)
7. innerRef → ref (React 19)
8. selected_key → selectedKey (snake_case → camelCase, in both props and data objects)
9. opened → open (semantic rename)
10. on_show / on_hide → onOpen / onClose (semantic rename — NOT onShow/onHide)
11. triangle_position → arrowPosition (semantic rename)
12. date_format="YYYY/MM/DD" → dateFormat="yyyy/MM/dd" (casing + format string change)
13. variant="signal" → variant="primary" (removed variant)

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

#Theme.Provider → Theme.Context

Theme.Provider has been renamed to Theme.Context to align with React 19's context-as-provider pattern. The darkBackground prop has been removed in favor of surface="dark":

Before:

<Theme.Provider darkBackground>
  <Button>Primary</Button>
</Theme.Provider>

After:

<Theme.Context surface="dark">
  <Button>Primary</Button>
</Theme.Context>

Theme.Provider has been removed.

#Theme propMapping removed

The propMapping prop has been removed from the Theme component. If you relied on it, use CSS custom properties directly on your theme wrapper instead.

#Theme darkMode → colorScheme

The darkMode prop on the Theme component has been replaced with colorScheme, which accepts 'auto', 'light', or 'dark'. The CSS class eufemia-theme__dark-mode has been renamed to eufemia-theme__color-scheme--dark (or --light).

Before:

<Theme darkMode>
  <MyApp />
</Theme>

After:

<Theme colorScheme="dark">
  <MyApp />
</Theme>

Note: This is a silent failure — passing darkMode will not cause a TypeScript error but the prop will be ignored.

#Components

Each component section below lists its changes. Behavioral changes and removals are called out separately where applicable. The bulk of per-component changes are snake_case → camelCase renames covered by the automated migration section above.

Reading the per-component lists: Entries like on_change → onChange are JSX prop renames (apply in your component markup). Entries prefixed with the component name and a dot, like Autocomplete.no_options → Autocomplete.noOptions, are translation key renames — these appear in locale/Provider configuration objects, not as JSX attributes. Do not add them as JSX props.

#labelDirection default changed to vertical

The labelDirection prop now defaults to vertical instead of horizontal on all basis form components. This means labels are rendered above the input by default. If you relied on the horizontal default, explicitly set labelDirection="horizontal".

Affected components: Input, InputMasked, Textarea, Autocomplete, Dropdown, DatePicker, Slider, ProgressIndicator, ToggleButton, ToggleButton.Group, Radio.Group, FormLabel.

If you used <Provider formElement={{ labelDirection: 'vertical' }}> or labelDirection="vertical" to achieve vertical labels, you can now remove them.

#Section

1. All deprecated style_type variants and their legacy dnb-section--... theme classes were removed. Use the variant or backgroundColor property instead:

• mint-green-12
• mint-green
• sea-green
• emerald-green
• lavender
• black-3
• sand-yellow
• pistachio
• fire-red
• fire-red-8

2. Remove spacing. Use innerSpace instead. The spacing prop only applied vertical (top/bottom) padding, so use the block shorthand to match the old behavior:

• spacing -> innerSpace={{ block: 'large' }}
• spacing="x-small" -> innerSpace={{ block: 'x-small' }}
• spacing="small" -> innerSpace={{ block: 'small' }}
• spacing="medium" -> innerSpace={{ block: 'medium' }}
• spacing="large" -> innerSpace={{ block: 'large' }}
• spacing="x-large" -> innerSpace={{ block: 'x-large' }}
• spacing="xx-large" -> innerSpace={{ block: 'xx-large' }}

You can also use top and bottom individually if you need different values, e.g. innerSpace={{ top: 'small', bottom: 'large' }}. Note that innerSpace="large" (a plain string) applies padding on all four sides, not just top/bottom.

3. Replace variant's value info with information.

4. Replace inner_ref with ref.

#Types

• The exported SectionSpacing type has been removed. If you imported it (e.g. for Breadcrumb or custom components), use the InnerSpaceType from @dnb/eufemia/components/space/types instead.

#Styling

• Remove CSS classes dnb-section--spacing, dnb-section--spacing-small, etc, as they are not supported anymore.

#HelpButton

#Translations

• Replace HelpButton.aria_role with HelpButton.ariaRole.

#Autocomplete

Removals and behavioral changes:

• The deprecated onStateUpdate prop has been removed. Use onChange instead.
• Replace input_icon with icon. The inputIcon prop has been removed — use the icon prop instead (defaults to 'loupe').
• Replace opened with open.
• Replace align_autocomplete with align.
• Replace on_show with onOpen and on_hide with onClose (not just a casing change — the event names changed).

#Properties

The following properties have been renamed from snake_case to camelCase:

• 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_position 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 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 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.
• Removed: action_menu / actionMenu. Use the new Menu component instead.
• Replace is_popup with isPopup.
• 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.
• Replace CSS class dnb-autocomplete__suffixValue with dnb-autocomplete__suffix-value (BEM kebab-case fix).

#TypeScript types

• Replace AutocompleteClearEvent with AutocompleteOnClearParams.
• Replace AutocompleteTypeEvent with AutocompleteOnTypeParams.
• Replace AutocompleteFocusEvent with AutocompleteOnFocusParams.
• Replace AutocompleteBlurEvent with AutocompleteOnBlurParams.
• Replace AutocompleteChangeEvent with AutocompleteOnChangeParams.
• Replace AutocompleteSelectEvent with AutocompleteOnSelectParams.

#DrawerListDataArrayObject

Data object property renames: selected_value → selectedValue, suffix_value → suffixValue, search_content → searchContent, class_name → className. See DrawerList for details.

#Dropdown

Removals and behavioral changes:

• The deprecated onStateUpdate prop has been removed. Use onChange instead.
• The actionMenu prop has been removed. Use the new Menu component instead.
• The moreMenu prop has been removed. Use the new Menu component instead.
• Replace opened with open.
• Replace align_dropdown with align.
• Replace on_show with onOpen and on_hide with onClose (not just a casing change — the event names changed).

#Properties

The following properties have been renamed from snake_case to camelCase:

• 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_position 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.
• Removed: more_menu / moreMenu. Use the new Menu component instead.
• Replace trigger_element with triggerElement.
• Replace open_on_focus with openOnFocus.
• Removed: action_menu / actionMenu. Use the new Menu component instead.
• Replace is_popup with isPopup.
• Replace prevent_focus with preventFocus.

#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

Data object property renames: selected_value → selectedValue, suffix_value → suffixValue, search_content → searchContent, class_name → className. See DrawerList for details.

#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_position 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.
• Removed: action_menu / actionMenu. Use the new Menu component instead.
• 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.

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

#Styling

• Replace CSS class dnb-anchor--contrast with dnb-anchor--surface-dark.

#Input

Removals:

• 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 clear with showClearButton.
• Replace input_class with inputClassName (note the name change, not just casing).

#Properties

The following properties have been renamed from snake_case to camelCase:

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

#Translations

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

#SubmitButton

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

#InputMasked

Major change: The masking engine has been replaced. Read this section carefully.

In v11, the InputMasked component has been rewritten to use Maskito instead of the unmaintained text-mask library. This brings better input handling, improved mobile keyboard support, and more reliable cursor/caret behavior. The public API (mask, numberMask, currencyMask, asNumber, asCurrency, asPercent, etc.) remains the same — the masking engine underneath has changed.

New props added:

• allowOverflow – allow typing beyond the defined mask length.
• overwriteMode – control how overwriting characters is handled (shift or replace).

#Properties

• The deprecated onStateUpdate prop has been removed. Use onChange instead.
• Replace clear with showClearButton.
• 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 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 inputClassName.
• 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.

#Deprecations and removals

• MultiInputMask has been removed as a public component. If you were importing it directly, use InputMasked instead.

• show_guide has been removed. If you need to communicate an expected format, pass an example using the regular placeholder prop (e.g. placeholder="00 00 00") or provide helper text next to the field.

• keep_char_positions has been removed.

• placeholder_char has been removed.

• pipe has been removed.

• MaskFunction (function-based masks) has been removed. Maskito only supports array masks (Array<string | RegExp>) and RegExp masks. Convert any custom mask functions to array-based masks.

  Before:

  // Function-based mask (no longer supported)
  <InputMasked mask={(value) => value.split('').map(() => /\d/)} />
  
  // Object-wrapped mask (no longer supported)
  <InputMasked mask={{ mask: [/\d/, /\d/, '/', /\d/, /\d/] }} />

  After:

  // Array mask (use directly)
  <InputMasked mask={[/\d/, /\d/, '/', /\d/, /\d/]} />

• The { mask: ... } object form for masks has been removed. Use array masks directly instead of wrapping them in an object.

• The addon helpers createNumberMask and emailMask have been removed. The following imports no longer work and should be deleted or replaced:

  import createNumberMask from '@dnb/eufemia/components/input-masked/addons/createNumberMask'
  import emailMask from '@dnb/eufemia/components/input-masked/addons/emailMask'

• The backward-compatibility re-export file InputMaskedHooks has been removed. If you imported hooks from @dnb/eufemia/components/input-masked/InputMaskedHooks, import from @dnb/eufemia/components/input-masked/hooks instead.

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

#Events

• Replace on_change with onChange.

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

#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 textareaClassName.
• 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 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 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.
• Replace prerender with keepInDOM.

#Events

• Replace on_change with onChange.

#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".
• Replace fileListAriaLabel with listAriaLabel.

#Stat

#Removals

• Stat.Amount has been removed. Use Stat.Number instead.
• Stat.Info no longer accepts variant="default". Use variant="plain" instead.
• Stat.Label no longer accepts variant="default". Use variant="plain" instead.

Before:

<Stat.Amount value={1000} />
<Stat.Info variant="default">Info text</Stat.Info>

After:

<Stat.Number value={1000} />
<Stat.Info variant="plain">Info text</Stat.Info>

#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 — common mappings:
  • modifier="medium" → weight="medium"
  • modifier="small" → size="small"
  • modifier="x-small" → size="x-small"

#Definition lists

#Properties

• Replace direction in <Dl> with layout.

#Breadcrumb

#Properties

• Replace isCollapsed with collapsed.
• Replace styleType (or style_type) with backgroundColor.
• The spacing prop type has changed from SectionSpacing to SpaceTypeAll | SpaceTypeMedia. All previously valid string values still work, but if you imported SectionSpacing to type your Breadcrumb spacing, update to use the new types.

#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 class with className.
• Replace children with label.

#Events

• Replace on_complete with onComplete.

#Styling

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

#Translations

• Replace translation ProgressIndicator.indicator_label with ProgressIndicator.indicatorLabel.

#PaymentCard

#Properties

• Replace product_code with productCode.
• Replace card_number with cardNumber.
• Replace card_status with cardStatus.
• Replace raw_data with rawData.
• The class prop has been removed. Use className instead.

#cardStatus property

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

#Translations

• Remove translation PaymentCard.text_card_number as it's not supported anymore.
• 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.

#Removed daggy (tagged sum) types

The PaymentCard types (DNB, Visa, Mastercard, CardType, BankAxept, Saga, PB, ProductType, BankAxeptType) have been refactored from daggy tagged sums to plain TypeScript discriminated unions. The constructor API (DNB.Colored('...'), Mastercard.Default, etc.) is unchanged, but how you consume them has changed:

• .cata() removed — Replace .cata({ Variant: () => ... }) with a switch on the .tag property:

  - cardType.cata({
  -   Visa: () => renderVisa(),
  -   Mastercard: () => renderMastercard(),
  -   None: () => null,
  - })
  + switch (cardType.tag) {
  +   case 'Visa': return renderVisa()
  +   case 'Mastercard': return renderMastercard()
  +   case 'None': return null
  + }

• @@tag replaced with tag — If you accessed the '@@tag' property, use .tag instead.

• .is() removed — Use .tag comparison instead: val.tag === 'Visa'.

• .toString() removed — Use .tag for the variant name.

• Reference equality changed — Unit variants are now plain objects, so === comparison no longer works. Use .tag comparison instead:

  - data.bankAxept === BankAxeptType.BankAxept
  + data.bankAxept.tag === 'BankAxept'

#Divider (Horizontal Rule)

#Properties

• Remove the light and medium props — they are no longer supported. The Divider now renders with a single default style. If you need to customize the line appearance, use CSS custom properties or a wrapper with custom styling.
• 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.

#Styling

• The default outline has changed to 1px with color #ebebeb.
• The corner radius has changed to 24px.

#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 children with label.

#Events

• Replace on_change with onChange.

#TypeScript types

• Replace OnChangeParams with CheckboxOnChangeParams.
• Replace OnClickParams with CheckboxOnClickParams.

#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 status_no_animation with statusNoAnimation.

#Events

• Replace on_change with onChange.
• Replace on_change_end with onChangeEnd.

#Logo

Major change: The Logo component API has been redesigned. Instead of brand and variant props, import the specific SVG component directly.

#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. Alt text is now built into each SVG component (e.g. DnbDefault.alt is 'DNB Logo'). The Logo component reads svg.alt automatically. To customize the alt text, pass aria-label to the Logo component.
• 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

Removals:

• The variant="signal" has been removed. Use variant="primary" or variant="secondary" instead.
• 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.

#Properties

• 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.
• The class prop has been removed. Use className instead.
• Replace inner_ref with ref.

#Events

• Replace on_click with onClick.

#Modal, Dialog and Drawer

Removals and behavioral changes:

• Removed: rootId property has been removed. Modal root elements no longer support custom IDs.
• Replace openState with open. Replace openState="opened" with open={true} and openState="closed" with open={false}.
• 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.

#Properties

The following properties have been renamed from snake_case to camelCase:

• 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 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 confirmType's value info with information on Dialog.

#Events

• Replace on_open with onOpen.
• Replace on_close with onClose.
• Replace on_close_prevent with onClosePrevent.

#TypeScript types

• Replace ModalPropTypes with ModalAllProps.

#Translations

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

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

#Dialog.Body and Drawer.Body

#Properties

• Replace styleType (or style_type) with backgroundColor.
• Replace spacing with innerSpace. Use block to match the old vertical-only padding:
  • spacing -> innerSpace={{ block: 'large' }}
  • spacing="x-small" -> innerSpace={{ block: 'x-small' }}
  • spacing="small" -> innerSpace={{ block: 'small' }}
  • spacing="medium" -> innerSpace={{ block: 'medium' }}
  • spacing="large" -> innerSpace={{ block: 'large' }}
  • spacing="x-large" -> innerSpace={{ block: 'x-large' }}
  • spacing="xx-large" -> innerSpace={{ block: 'xx-large' }}

#Heading

#Properties

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

#H (heading elements)

#Properties

• Replace as with element.

Before:

<H as="h2" size="medium">
  Heading
</H>

After:

<H element="h2" size="medium">
  Heading
</H>

#Table

#Properties

• Replace accordion with mode="accordion".
• Replace accordionChevronPlacement="start" with accordionChevronPlacement="left" (or remove it, since "left" is the default).
• Replace accordionChevronPlacement="end" with accordionChevronPlacement="right".

#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 info with information.
• Replace state's value warn with warning.
• Replace variant's value flat with plain.

#TypeScript types

• The FormStatusState type no longer includes | string | boolean. It now only accepts the literal values 'error', 'warning', 'information', 'success', and 'marketing'. If you were passing arbitrary strings or booleans as state or statusState, update them to one of the valid literals.

#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 or contentSpacing with contentInnerSpace. The contentSpacing prop has been removed – use contentInnerSpace instead, which passes innerSpace to the content Section.
• Replace tab_element with tabElement.
• Replace tabs_style with tabsStyle.
• Replace tabs_spacing or tabsSpacing with tabsInnerSpace. The tabsSpacing prop has been removed – use tabsInnerSpace instead.
• Replace nav_button_edge with navButtonEdge.
• Replace prevent_rerender with preventRerender.
• Replace focus_key with focusKey.
• Replace no_border with noBorder.
• Replace prerender with keepInDOM.
• The class prop has been removed. Use className instead.

#Events

• Replace on_change with onChange.
• Replace on_click with onClick.
• Replace on_mouse_enter with onMouseEnter.
• Replace on_focus with onFocus.

#Styling

• The CSS classes dnb-section--spacing-* are no longer applied to the Tabs content wrapper or tab list. If you have custom CSS targeting these classes within Tabs, update to target the inline styles or use contentInnerSpace/tabsInnerSpace props instead.

#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. Note: loadButton is now an object prop (not a flat string). Migrate as follows: