---
title: Field.Provider
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.925Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Field.Provider

## Import

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

## Description

`Field.Provider` is a provider for forwarding fields properties, such as `required` or `disabled` to all nested field components.

## Usage

```tsx
import { Form, Field } from '@dnb/eufemia/extensions/forms'
render(
  <Field.Provider required disabled>
    <Field.String />
  </Field.Provider>
)
```

Keep in mind, you can also set `required` or `disabled` on the [Form.Handler](/web/forms/Form/Handler/). And invert the logic via the `Field.Provider` by using `required={false}` or `disabled={false}`.


## Demos

### Required


```tsx
render(<Form.Handler>
        <Flex.Stack>
          <Field.String label="Not required" />

          <Field.Provider required>
            <Field.String label="Required A" />
            <Field.Number label="Required B" />
          </Field.Provider>

          <Form.ButtonRow>
            <Form.SubmitButton />
          </Form.ButtonRow>
        </Flex.Stack>
      </Form.Handler>)
```


### Disabled


```tsx
render(<Form.Handler>
        <Flex.Stack>
          <Field.String label="Not disabled" />

          <Field.Provider disabled>
            <Flex.Stack>
              <Field.String label="Disabled" />
              <Form.ButtonRow>
                <Form.SubmitButton />
              </Form.ButtonRow>
            </Flex.Stack>
          </Field.Provider>
        </Flex.Stack>
      </Form.Handler>)
```


### Inverted


```tsx
render(<Form.Handler disabled>
        <Flex.Stack>
          <Field.String label="Disabled" />

          <Field.Provider disabled={false}>
            <Flex.Stack>
              <Field.String label="Not disabled" />
              <Form.ButtonRow>
                <Form.SubmitButton />
              </Form.ButtonRow>
            </Flex.Stack>
          </Field.Provider>
        </Flex.Stack>
      </Form.Handler>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "required": {
      "doc": "When set to `true`, the field will give an error if the value fails the required validation. When set to `false`, the field will not be required, but will add a \"(optional)\" suffix to the label.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "Set `true` to show the field but without the possibility of changing the value.",
      "type": "boolean",
      "status": "optional"
    },
    "layout": {
      "doc": "Layout for the label and input. Can be `horizontal` or `vertical`.",
      "type": [
        "\"horizontal\"",
        "\"vertical\""
      ],
      "status": "optional"
    },
    "layoutOptions": {
      "doc": "Use this to set additional options for the `horizontal` layout, e.g. `{ width: \"medium\" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width, e.g. `{ minWidth: \"6rem\", maxWidth: \"12rem\" }`.",
      "type": "object",
      "status": "optional"
    },
    "locale": {
      "doc": "Locale (language) to use for all nested Eufemia components.",
      "type": "string",
      "status": "optional"
    },
    "translations": {
      "doc": "Provide translation strings. Can be a flat or nested object keyed by locale, e.g. `{ \"nb-NO\": { MyKey: \"value\" } }`. See [Localization](/web/styling-and-themes/configuration/localization).",
      "type": "object",
      "status": "optional"
    },
    "translationsLoader": {
      "doc": "Async function that receives the current locale and returns a translations object. Called on mount and when the locale changes. Loaded translations are merged on top of static `translations`. See [Load translations dynamically](/web/styling-and-themes/configuration/localization/#load-translations-dynamically).",
      "type": "function",
      "status": "optional"
    },
    "messageFormatter": {
      "doc": "Message formatter for advanced message formatting (e.g. ICU MessageFormat). Import and pass `icu` from `@dnb/eufemia/shared` to enable pluralization, select, and other ICU features in translation strings.",
      "type": "ICUFormatMessage",
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```