Skip to content
Home

ViewContainer

Info
Demos
Properties
Events

Import

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

Description

Form.Section.ViewContainer enables users to toggle (with animation) the content of each item between this view and the Form.Section.EditContainer container.

By default, it features the toolbar containing a "Edit" button.

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


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


    <Form.Section.ViewContainer title="Account holder">
      <Value.Name.Last path="/name" />
    </Form.Section.ViewContainer>
  </Form.Section>,
)

Customize the Toolbar

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


render(
  <Form.Section>
    <Form.Section.ViewContainer>
      <Value.Name.Last itemPath="/name" />


      <Form.Section.Toolbar>
        <Form.Section.ViewContainer.EditButton />
      </Form.Section.Toolbar>
    </Form.Section.ViewContainer>
  </Form.Section>,
)

Accessibility

The ViewContainer 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 item (view and edit) container gets removed, the active element focus will be set on the previous item.

Demos

Your account

Fornavn
Nora
Etternavn
Mørk