---
title: 'Form.Section.EditContainer'
description: '`Form.Section.EditContainer` enables users to toggle (with animation) the content of each item between the view and edit container.'
version: 0.0.0-development
generatedAt: 2026-09-03T13:34:43.956Z
checksum: c7cc08edf454e7c4bc22790763a11946e813d04ffeeb7e3dbfdf420767853a16
---

# Form.Section.EditContainer

## Import

```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.Section.EditContainer />)
```

## Description

`Form.Section.EditContainer` enables users to toggle (with animation) the content of each item between the [Form.Section.ViewContainer](/uilib/extensions/forms/Form/Section/ViewContainer/) and this edit container.

By default, it features a toolbar containing a "Done" button and a "Cancel" button. The "Cancel" button resets any changes made to the item content, restoring it to its original state.

Use `preventUncommittedChanges` when users must confirm the section before submitting the form or continuing to the next Wizard step. Navigation is blocked while the section is in edit mode, until the user selects "Done" or "Cancel". The parent `Form.Section` must have a `path`.

```tsx
import { Form, Field, Value } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Section>
    <Form.Section.EditContainer title="Edit account holder">
      <Field.Name.First path="/firstName" />
      <Field.Name.Last path="/lastName" />
    </Form.Section.EditContainer>

    <Form.Section.ViewContainer title="Account holder">
      <Value.SummaryList>
        <Value.Name.First path="/firstName" />
        <Value.Name.Last path="/lastName" />
      </Value.SummaryList>
    </Form.Section.ViewContainer>
  </Form.Section>
)
```

## Customize the Toolbar

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

render(
  <Form.Section>
    <Form.Section.EditContainer>
      <Field.Name.Last itemPath="/name" />
      <Form.Section.Toolbar>
        <Form.Section.EditContainer.DoneButton />
        <Form.Section.EditContainer.CancelButton />
      </Form.Section.Toolbar>
    </Form.Section.EditContainer>
  </Form.Section>
)
```

## Accessibility

The `EditContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.

When the edit container becomes active, it will automatically receive the active element focus. And when the edit container switches to the view container, the focus will be set to the view container.


## Demos

### View and edit container

This demo shows the edit container opened by default by using the `containerMode="edit"` property.


```tsx
const MyEditContainer = () => {
  return <Form.Section.EditContainer>
              <Field.Name.First path="/firstName" />
              <Field.Name.Last path="/lastName" />
            </Form.Section.EditContainer>;
};
const MyViewContainer = () => {
  return <Form.Section.ViewContainer>
              <Value.SummaryList>
                <Value.Name.First path="/firstName" />
                <Value.Name.Last path="/lastName" />
              </Value.SummaryList>
            </Form.Section.ViewContainer>;
};
render(<Form.Handler onSubmit={async data => console.log('onSubmit', data)} defaultData={{
  nestedPath: {
    firstName: 'Nora'
  }
}}>
            <Form.Card>
              <Form.SubHeading>Your account</Form.SubHeading>
              <Form.Section path="/nestedPath" required containerMode="edit">
                <MyEditContainer />
                <MyViewContainer />
              </Form.Section>
            </Form.Card>
            <Form.SubmitButton />
          </Form.Handler>);
```


### Prevent uncommitted changes

With `preventUncommittedChanges`, the user must select "Done" or "Cancel" before continuing to the next Wizard step, even when no values have changed.


```tsx
render(<Form.Handler>
        <Wizard.Container>
          <Wizard.Step title="Profile">
            <Form.Section path="/profile" containerMode="edit">
              <Form.Section.EditContainer preventUncommittedChanges>
                <Field.Name.First path="/firstName" />
              </Form.Section.EditContainer>

              <Form.Section.ViewContainer>
                <Value.Name.First path="/firstName" />
              </Form.Section.ViewContainer>
            </Form.Section>

            <Wizard.Buttons />
          </Wizard.Step>

          <Wizard.Step title="Summary">
            <Value.Name.First path="/profile/firstName" />
            <Wizard.Buttons />
          </Wizard.Step>
        </Wizard.Container>
      </Form.Handler>)
```


### Async onDone

When `onDone` returns a Promise, the section stays in edit mode while it is pending. It switches to view mode when the Promise resolves and stays in edit mode when it rejects.

While the Promise is pending, the fields inside the section and its "Done" and "Cancel" buttons are disabled. This keeps the submitted values from changing while the save is in flight. Make sure the returned Promise always settles, because one that never resolves or rejects leaves the section disabled.

The demo starts with a simulated save error. Change the first name and select **Done** to verify that the input remains. Turn off **Simulate save error** and try again to complete the save.


```tsx
const formId = 'async-on-done';
const Example = () => {
  const [error, setError] = useState<string>();
  const saveSection = async () => {
    setError(undefined);
    await new Promise(resolve => setTimeout(resolve, 1500));
    const {
      getValue
    } = Form.getData(formId);
    if (getValue('/simulateError')) {
      setError('The section could not be saved. Try again.');
      throw new Error('The section could not be saved');
    }
  };
  return <Form.Handler id={formId} defaultData={{
    profile: {
      firstName: 'Nora'
    },
    simulateError: true
  }}>
              <Form.Card>
                <Form.Section path="/profile" containerMode="edit">
                  <Form.Section.EditContainer onDone={saveSection}>
                    <Field.Name.First path="/firstName" />
                    <Field.Boolean path="//simulateError" label="Simulate save error" variant="button" />
                    {error && <FormStatus>{error}</FormStatus>}
                  </Form.Section.EditContainer>

                  <Form.Section.ViewContainer>
                    <Value.Name.First path="/firstName" />
                  </Form.Section.ViewContainer>
                </Form.Section>
              </Form.Card>
            </Form.Handler>;
};
render(<Example />);
```

## Properties


```json
{
  "props": {
    "title": {
      "doc": "The title of the container.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "variant": {
      "doc": "Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.",
      "type": [
        "\"outline\"",
        "\"filled\"",
        "\"basic\""
      ],
      "status": "optional"
    },
    "preventUncommittedChanges": {
      "doc": "Prevents form submission and Wizard navigation while the section is in edit mode, until the Done or Cancel button is selected. Requires Form.Section to have a path.",
      "type": "boolean",
      "status": "optional"
    },
    "[FlexVertical](/uilib/layout/flex/container/properties)": {
      "doc": "All Flex.Vertical properties.",
      "type": "Various",
      "status": "optional"
    }
  }
}
```


## Translations


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "SectionEditContainer.cancelButton": {
      "nb-NO": "Avbryt",
      "en-GB": "Cancel",
      "sv-SE": "Avbryt",
      "da-DK": "Annuller"
    },
    "SectionEditContainer.confirmCancelText": {
      "nb-NO": "Er du sikker på at du vil forkaste endringene?",
      "en-GB": "Are you sure you want to discard your changes?",
      "sv-SE": "Är du säker på att du vill ångra dina ändringar?",
      "da-DK": "Er du sikker på, at du vil forkaste dine ændringer?"
    },
    "SectionEditContainer.doneButton": {
      "nb-NO": "Ferdig",
      "en-GB": "Done",
      "sv-SE": "Klar",
      "da-DK": "Færdig"
    },
    "SectionEditContainer.errorInSection": {
      "nb-NO": "Du må rette feilene over.",
      "en-GB": "You must correct the errors above.",
      "sv-SE": "Du måste rätta felen ovan.",
      "da-DK": "Du skal rette fejlene ovenfor."
    },
    "SectionEditContainer.preventUncommittedChangesText": {
      "nb-NO": "Du må fullføre redigeringen før du kan fortsette.",
      "en-GB": "You must finish editing before continuing.",
      "sv-SE": "Du måste avsluta redigeringen innan du kan fortsätta.",
      "da-DK": "Du skal afslutte redigeringen, før du kan fortsætte."
    }
  }
}
```

## Events


```json
{
  "props": {
    "onDone": {
      "doc": "Callback for the done button. Return a Promise to keep the section in edit mode until it settles: it switches to view mode when the Promise resolves, and stays in edit mode when it rejects. Any other return value is ignored.",
      "type": "function",
      "status": "optional"
    },
    "onCancel": {
      "doc": "Callback for the cancel button.",
      "type": "function",
      "status": "optional"
    }
  }
}
```