@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
158 lines (141 loc) • 5.04 kB
Markdown
---
title: 'Value.Provider'
description: 'The `Value.Provider` lets you pass generic properties to all nested Value.* components.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.589Z
checksum: 318a1c99553cf1947e462c0b166a40af96eb5641e2f3ed3233ae433781407f5b
---
```tsx
import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Provider />)
```
The `Value.Provider` lets you pass generic properties to all nested Value.\* components.
```tsx
import { Field, Value } from '@dnb/eufemia/extensions/forms'
render(
<>
<Field.Boolean path="/myPath" label="My label" />
<Value.Provider inheritLabel>
<Value.Boolean path="/myPath" />
</Value.Provider>
</>
)
```
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Value/Provider)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Provider)
```tsx
render(
<Form.Handler>
<Form.Card>
<Field.Boolean
variant="button"
path="/isVisible"
defaultValue={true}
/>
<Form.Visibility pathTrue="/isVisible" animate>
<Field.Name.First path="/foo" defaultValue="foo" />
<Field.Name.Last path="/bar" defaultValue="bar" />
</Form.Visibility>
<Value.Provider inheritVisibility>
<Value.SummaryList>
<Value.Name.First path="/foo" />
<Value.Name.First path="/bar" />
</Value.SummaryList>
</Value.Provider>
</Form.Card>
</Form.Handler>
)
```
## Properties
```json
{
"props": {
"value": {
"doc": "Value for the value component. Will take precedence over the path value given in the data context.",
"type": "{valueType}",
"status": "optional"
},
"defaultValue": {
"doc": "Default value for the value component. Will not take precedence over the path value given in the data context.",
"type": "{valueType}",
"status": "optional"
},
"label": {
"doc": "Field label to show above the displayed value.",
"type": "string",
"status": "optional"
},
"labelSrOnly": {
"doc": "Use `true` to make the label only readable by screen readers.",
"type": "boolean",
"status": "optional"
},
"help": {
"doc": "Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, set `outset` to `false` to display the help text inline (inset) instead of the default outset behavior, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).",
"type": "object",
"status": "optional"
},
"transformLabel": {
"doc": "Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.",
"type": "function",
"status": "optional"
},
"inheritLabel": {
"doc": "Use `true` to inherit the label from a visible (rendered) field with the same path.",
"type": "boolean",
"status": "optional"
},
"inheritVisibility": {
"doc": "Use `true` to inherit the visibility from a field with the same path. You can find more info in the [Value section](/uilib/extensions/forms/Value/#inherit-visibility-from-fields-based-on-path).",
"type": "boolean",
"status": "optional"
},
"showEmpty": {
"doc": "Shows the value even if it is empty.",
"type": "boolean",
"status": "optional"
},
"placeholder": {
"doc": "Text showing in place of the value if no value is given.",
"type": "string",
"status": "optional"
},
"path": {
"doc": "JSON Pointer for where the data for this input is located in the source dataset.",
"type": "string",
"status": "optional"
},
"inline": {
"doc": "For showing the value inline (not as a block element).",
"type": "boolean",
"status": "optional"
},
"maxWidth": {
"doc": "Use `auto` for no max-width (use browser default), `small`, `medium` or `large` for predefined standard max widths. Defaults to `large`.",
"type": "string",
"status": "optional"
},
"transformIn": {
"doc": "Transforms the `value` before its displayed in the value component.",
"type": "function",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
},
"children": {
"doc": "Contents.",
"type": "React.Node",
"status": "required"
}
}
}
```