Eufemia quick reference

This is a compact, practical guide for teams who already know they want Eufemia and need the fastest path to decisions and common patterns.

Before you build

Choose the brand theme:
- ui (default), sbanken, carnegie, or eiendom (theming).
Form-heavy flow?
- Prefer the Forms extension and Field.* components for validation and structure.
Multi-step journeys?
- Use Wizard for step navigation and focus management.
Loading states?
- Plan for Skeleton or ProgressIndicator.
Internationalization?
- Plan for localization and i18n.
Styling strategy?
- Decide how to import styles and whether you need style isolation.

Setup

npm i @dnb/eufemia react react-dom

// App entry - import styles once
import '@dnb/eufemia/style'

// Components
import { Button, Input, Card, Dialog, Icon } from '@dnb/eufemia'
import { H1, H2, P } from '@dnb/eufemia'
import { Flex, Space } from '@dnb/eufemia'
import { Form, Field, Value } from '@dnb/eufemia/extensions/forms'
import { Theme } from '@dnb/eufemia/shared'

Quick component reference

// Buttons
<Button text="Primary" />
<Button variant="secondary" text="Cancel" />
<Button variant="tertiary" icon="chevron_left" text="Back" />
<Button icon={banking} text="With custom Icon" />

// Inputs
<Input label="My label"  />
<Textarea label="My label" rows={4} />
<Dropdown label="My label" data={options} />
<DatePicker label="My label" show_input />

// Layout
<Flex.Stack>
<Flex.Horizontal>
<Card stack>

// Feedback
<FormStatus state="error">Error message</FormStatus>
<Skeleton show={loading}><Content /></Skeleton>
<Dialog title="Confirm">{content}</Dialog>

// Utility
<CopyOnClick value="text">Copy me</CopyOnClick>
<AriaLive priority="high">{announcement}</AriaLive>

Tip: For tertiary buttons, an icon is recommended. If you need a text-only variant, see Anchor.

Icons

import { Icon } from '@dnb/eufemia'
import { calendar,  } from '@dnb/eufemia/icons'

<Icon icon="bell" />
<Icon icon={calendar} />
<Button icon={calendar} text="Schedule" />

See Icons for the full list and usage guidance.

Key conventions

Prefer Flex and Forms over other layout and form solutions.
Use Field.* components for user input and forms whenever available.
Follow accessibility basics and avoid font sizes below 14px.
Use the spacing system and Space instead of ad-hoc margins.
Import styles once at the app root (import '@dnb/eufemia/style').
Prefer helpers and tools over custom one-off utilities.
Use HTML elements for semantic structure, even when not using components.
Favor CSS custom properties and spacing helpers over hard-coded values (Spacing, Typography).

Detailed references

Form fields

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

function MyApp() {
  return (
    <Form.Handler onSubmit={(data) => {}}>
      <Field.NationalIdentityNumber path="/ssn" required />
      <Field.BankAccountNumber path="/account" required />
      <Field.OrganizationNumber path="/orgNr" />
      <Field.Currency path="/amount" currency="NOK" />
      <Field.Email path="/email" />
      <Field.PhoneNumber path="/phone" />
      <Field.PostalCodeAndCity path="/address" />
      <Field.Upload path="/documents" acceptedFileTypes={['pdf', 'png']} />
      <Value.Email path="/email" />
      <Value.String path="/summary" label="Summary" />
      <Form.SubmitButton />
    </Form.Handler>
  )
}

See Forms for validation, schema, and more fields.

Forms essentials

Start with Forms getting started for patterns, validation, and data handling.
Use Form.Handler for submit/validation and GlobalStatus for error summaries.
For multi-step flows, use Wizard.
For edit/view modes, use Form.Section.
Prefer feature fields (e.g. Field.*) when available.
For read-only outputs, use Value components (e.g. Value.*).
Most Field.* components have a corresponding Value.* component; you can mix fields and values in the same form.
For read-only summaries, use Value.SummaryList.
Validation schemas can be provided via Zod or AJV JSON Schema.

Standard form pattern

import { Form, Field, Flex } from '@dnb/eufemia/extensions/forms'
import { GlobalStatus, Button } from '@dnb/eufemia'

function MyForm() {
  return (
    <Form.Handler onSubmit={async (data) => {}} required>
      <GlobalStatus />
      <Form.Card>
        <Form.MainHeading>Transfer</Form.MainHeading>
        <Flex.Stack>
          <Field.BankAccountNumber path="/from" label="From" />
          <Field.BankAccountNumber path="/to" label="To" />
          <Field.Currency path="/amount" currency="NOK" />
          <Field.Currency path="/amount" currency="NOK" required={false} />
          <Flex.Horizontal justify="flex-end">
            <Form.SubmitButton text="Transfer" />
            <Button variant="secondary" text="Cancel" />
          </Flex.Horizontal>
        </Flex.Stack>
      </Form.Card>
    </Form.Handler>
  )
}

Form.Section (edit/view mode)

<Form.Section>
  <Form.Section.EditContainer>
    <Field.Name.Last path="/name" />
  </Form.Section.EditContainer>
  <Form.Section.ViewContainer>
    <Value.Name.Last path="/name" />
  </Form.Section.ViewContainer>
</Form.Section>

#Eufemia quick reference

#Before you build

#Setup

#Quick component reference

#Icons

#Key conventions

#Detailed references

#Form fields

#Forms essentials

#Standard form pattern

#Form.Section (edit/view mode)