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.
Properties#
| Type | Description | |
|---|---|---|
label | string | (optional) Label text displayed above the field. Most fields already have a default label, so check the field translations for an existing label entry. Only set label when you need to override the default. |
labelDescription | string | (optional) Supporting text displayed below the label by default. Set labelDescriptionInline to true to display it on the same line as the label. |
labelDescriptionInline | boolean | (optional) If true, the labelDescription will be displayed on the same line as the label. |
labelSrOnly | boolean | (optional) Use true to make the label only readable by screen readers. |
labelSize | "medium" "large" | (optional) Define one of the following heading sizes: medium or large. |
width | string false | (optional) Will set the width for the whole block. Use small, medium, large for predefined standard widths. You can also set a custom width {number}rem or use stretch or false. |
contentWidth | string false | (optional) Will set the width for its contents. Use small, medium, large for predefined standard widths. You can also set a custom width {number}rem or use stretch or false. |
disabled | boolean | (optional) Set true to make the inner FormLabel behave as disabled. |
error | string React.ReactElement Error FormError Array<string | React.ReactElement | Error | FormError> | (optional) Error message shown below the fields. |
warning | React.ReactNode Array<React.ReactNode> | (optional) Warning message shown below the fields. |
info | React.ReactNode Array<React.ReactNode> | (optional) Info message shown below the fields. |
help | object | (optional) Provide help content for the field using title and content as a string or React.ReactNode. Additionally, you can set open to true to display the inline help, set openOnFind to true to open matching inline help from browser find-in-page, 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 (recommended for larger amounts of content). |
align | "center" "bottom" | (optional) center or bottom for aligning the contents vertically. Defaults to bottom. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |