---
title: Build your first form
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.927Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Build your first form

## Quick start

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

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

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

```jsx
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:


```tsx
const existingData = {
  companyName: 'DNB'
};
function MyForm() {
  return <Form.Handler defaultData={existingData} onSubmit={async data => console.log('onSubmit', data)} required>
              <Form.MainHeading>Quick start</Form.MainHeading>

              <Form.Card>
                <Field.Name.Company path="/companyName" />

                <Field.OrganizationNumber path="/companyOrganizationNumber" />

                <Field.Selection path="/postalAddressSelect" label="Ønsket sted for tilsendt post" variant="radio" required={false}>
                  <Field.Option value="companyAddress" title="Samme som forretningsadresse" />
                  <Field.Option value="other" title="Annet" />
                </Field.Selection>

                <Form.Visibility visibleWhen={{
        path: '/postalAddressSelect',
        hasValue: 'other'
      }} animate>
                  <Field.String path="/postalAddress" label="Sted for tilsendt post" />
                </Form.Visibility>
              </Form.Card>
              <Form.SubmitButton variant="send" />
            </Form.Handler>;
}
render(<MyForm />);
```


## Creating forms

To build an entire form, use surrounding components such as [Form.Handler](/web/forms/Form/Handler/) and [Wizard.Container](/web/forms/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.

```tsx
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](/web/forms/Form/Handler/#formhandler) section or in the [Form.useData](/web/forms/Form/useData/#formusedata) hook docs.

To also get autocomplete and compile-time checking on the `path` props of every field and value, see [Type-checked paths](/web/forms/typed-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](/web/layout-and-typography/layout/flex/stack/) layout component for easy and consistent application forms.
- [Form.Card](/web/forms/Form/Card/) with the stack property `<Form.Card>...</Form.Card>` for the default card outline of forms.
- [Form.Appearance](/web/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

- [Best practices on Forms](/web/forms/best-practices-on-forms/).

## 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](/web/forms/create-component/)

## Continue

- [Form data and state](/web/forms/data-and-state/)
- [Conditional fields and values](/web/forms/conditional-content/)
- [Async forms and autosave](/web/forms/async-forms/)
- [Validation and error handling](/web/forms/validation/)
- [Form localization](/web/forms/localization/)
- [Debugging forms](/web/forms/debugging/)