Skip to content

Build your first form#

Quick start#

Here's how you import the components from within scopes, such as Form and Field:

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

Field components can be used directly as they are, for example Field.Email:

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Email />)

NB: In the above example, only the email field will be a part of your application bundle. Unused code will be tree-shaken away.

And here is how you can use the Form component:

Quick start

Ønsket sted for tilsendt post (valgfritt)

Creating forms#

To build an entire form, use surrounding components such as Form.Handler and Wizard.Container to simplify data flow and layout while reducing code complexity without compromising flexibility.

The required styles for Eufemia Forms are included when you import the main Eufemia styles (import '@dnb/eufemia/style') or the theme's ui-theme-components; no separate Forms CSS import is needed in these cases.

TypeScript support#

You can define the TypeScript type structure for your form data. This will help you to get better code completion and type checking.

NB: Use type instead of interface for the type definition.

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


type MyData = {
  firstName?: string
}


const submitHandler: OnSubmit<MyData> = (data) => {
  console.log(data.firstName satisfies string)
}


function MyForm() {
  return (
    <Form.Handler<MyData> onSubmit={submitHandler}>
      <MyComponent />
    </Form.Handler>
  )
}


const MyComponent = () => {
  const { data } = Form.useData<MyData>()
  return data.firstName
}

Read more about TypeScript support and the other methods in the Form.Handler section or in the Form.useData hook docs.

To also get autocomplete and compile-time checking on the path props of every field and value, see Type-checked paths.

Layout#

When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place.

  • Flex.Stack layout component for easy and consistent application forms.
  • Form.Card with the stack property <Form.Card>...</Form.Card> for the default card outline of forms.
  • Form.Appearance for changing sizes (height) of e.g. input fields.

Best practices on forms (accessibility, usability, and performance)#

When building forms, there are some best practices to keep in mind to ensure that your forms are accessible, usable, and performant. Read more about these best practices in the dedicated documentation on

Create your own component#

Eufemia Forms consists of helper components and tools so you can declaratively create interactive form components that flawlessly integrates between existing data and your custom form components. This ensures a common look and feel, even when ready-made components are combined with your local custom components.

Read more about creating your own component

Continue#

Suggest an edit