UNPKG

@dnb/eufemia

Version:

DNB Eufemia Design System UI Library

158 lines (141 loc) 5.04 kB
--- 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 --- # Value.Provider ## Import ```tsx import { Value } from '@dnb/eufemia/extensions/forms' render(<Value.Provider />) ``` ## Description 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> </> ) ``` ## Relevant links - [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) ## Demos ### Inherit visibility ```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" } } } ```