value | string | (optional) Source data value for the field. Will take precedence over the path value given in the data context. |
defaultValue | string | (optional) Default source data value for the field. Will not take precedence over the path value given in the data context. |
path | string | (optional) JSON Pointer for where the data for the field is located in the source dataset (when using Form.Handler or DataContext). The path will also be set as the name attribute for the string-field. |
info | React.Node
Array<React.Node>
function | (optional) Info message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
warning | React.Node
Array<React.Node>
function | (optional) Warning message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
error | Error
FormError
Array<Error | FormError>
function | (optional) Error message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
disabled | boolean | (optional) Set true to show the field but without the possibility of changing the value. |
emptyValue | string
undefined | (optional) The value to use (in onChange events etc) when emptying the field. Makes it possible for instance to provide undefined instead of an empty string when clearing the content of a text input. |
required | boolean | (optional) 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. |
labelSuffix | React.Node | (optional) Will append an additional text to the label, like "(optional)". When using inheritLabel, the suffix will not be inherited. NB: The visual appearance of the labelSuffix may change in the future. |
schema | object | (optional) Custom JSON Schema for validating the value. |
validateInitially | boolean | (optional) Set to true to show validation based errors initially (from given value-prop or source data) before the user interacts with the field. |
validateUnchanged | boolean | (optional) Set to true to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation. |
validateContinuously | boolean | (optional) Set to true to show validation based errors continuously while writing, not just when blurring the field. |
errorMessages | object | (optional) Custom error messages for each type of error, overriding default messages. The messages can be a React.ReactNode or a string. |
onChangeValidator | function | (optional) Custom validator function where you can return undefined, Error, FormError or an Array with either several other validators or several Error or FormError. It is triggered on every change done by the user. The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. |
onBlurValidator | function | (optional) Custom validator function where you can return undefined, Error, FormError or an Array with either several other validators or several Error or FormError. It is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. |
transformIn | function | (optional) Transforms the value before its displayed in the field (e.g. input). |
transformOut | function | (optional) Transforms the value before it gets forwarded to the form data object (context) or returned as the onChange value parameter. The first parameter is the internal value. Some fields do support a second parameter, like the SelectCountry, where the country object is given. |
label | string | (optional) Field label to show above / before the input feature. |
labelDescription | string | (optional) A more discreet text displayed beside the label (i.e for "(optional)"). |
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 the font-size of the label based on the font-size table. |
help | object | (optional) 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, or use renderAs set to dialog to render the content in a Dialog (recommended for larger amounts of content). |
layout | string | (optional) Layout for the label and input. Can be horizontal or vertical. |
layoutOptions | object | (optional) 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" }. |
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. |
Space | string
object | (optional) Spacing properties like top or bottom are supported. |