Basic Components Widgets
Checkbox dtl-form-input-checkbox
The checkbox is a type of input field that allows users to select only checked or unchecked values. Checkboxes is represented as small square that can be checked or unchecked by clicking on them. Checkbox is associated with a label that describes the option it represents. The use of checkboxes helps to simplify the process of collecting information by presenting the user with a clear list of options to choose from, while also allowing for flexible and multi-faceted data collection.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Checkbox",
"widget": {
"type": "checkbox"
}
}
Link dtl-form-input-link
The link field is an input field in a form that allows users to enter a hyperlink, such as a URL or email address. The field is represented by a text box, into which the user can type or paste a link. The use of a link field is particularly useful for collecting information about online resources, such as websites, online profiles, or articles.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Link",
"widget": {
"type": "link"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Custom link name
Key: customTitle
Name: Custom link name
Default: ""
External link
Key: target
Name: External link
Description: Opens external link in a new tab
Default: false
Disable the link
Key: noHref
Name: Disable the link
Description: Tick the checkbox if you wish to disable this link.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-link/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen custom title — gen-custom-title.json
Demonstrates widget.customTitle = "exampleValue" on dtl-form-input-link.
{
"type": "object",
"title": "Link — Custom link name",
"description": "Demonstrates widget.customTitle = \"exampleValue\" on dtl-form-input-link.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-link",
"customTitle": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen no href — gen-no-href.json
Disable the link: Tick the checkbox if you wish to disable this link.
{
"type": "object",
"title": "Link — Disable the link",
"description": "Disable the link: Tick the checkbox if you wish to disable this link.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-link",
"noHref": true
}
}
},
"layout": [
"field"
]
}
Gen target — gen-target.json
External link: Opens external link in a new tab
{
"type": "object",
"title": "Link — External link",
"description": "External link: Opens external link in a new tab",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-link",
"target": true
}
}
},
"layout": [
"field"
]
}
Text Item dtl-form-input-text
The basic component for general text input. Optionally you can configure validations, masks and visual behaviour. The validation ensures that the data entered meets certain criteria, such as being a certain length or having a specific format. The mask is used to format the text as it's being entered, such as adding dashes to a phone number or hyphens to a credit card number. This helps to improve the user experience by providing clear expectations for the type of data that should be entered and ensuring that the data is entered in a consistent format.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Text",
"widget": {
"type": "text"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Disable wrapping
Key: overflowValueHidden
Name: Disable wrapping
Description: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.
Default: false
Show delete value icon
Key: showClear
Name: Show delete value icon
Description: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-text/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Basic — 01-basic.json
{
"type": "object",
"title": "Text — basic",
"properties": {
"name": {
"type": "string",
"title": "Name",
"widget": {
"type": "text"
}
}
},
"layout": [
"name"
]
}
With validation — 02-with-validation.json
Length + regex pattern validation declared on the property itself (standard JSON Schema). The widget renders inline errors when input violates either constraint.
{
"type": "object",
"title": "Text — with JSON Schema validation",
"description": "Length + regex pattern validation declared on the property itself (standard JSON Schema). The widget renders inline errors when input violates either constraint.",
"properties": {
"username": {
"type": "string",
"title": "Username",
"widget": {
"type": "text",
"placeholder": "lowercase letters and digits"
},
"pattern": "^[a-z0-9]+$",
"minLength": 3,
"maxLength": 20
}
},
"layout": [
"username"
]
}
With mask — 03-with-mask.json
Mask formats input as the user types (here: Czech postal code, e.g. 131 00). Mask is enforced visually; combine with pattern if you need server-side validation too.
{
"type": "object",
"title": "Text — with input mask",
"description": "Mask formats input as the user types (here: Czech postal code, e.g. `131 00`). Mask is enforced visually; combine with `pattern` if you need server-side validation too.",
"properties": {
"zip": {
"type": "string",
"title": "PSČ",
"widget": {
"type": "text",
"mask": "999 99",
"placeholder": "___ __"
},
"pattern": "^[0-9]{3} [0-9]{2}$"
}
},
"layout": [
"zip"
]
}
Readonly — 04-readonly.json
Display-only field whose value comes from a JEXL expression evaluated at runtime. Used for derived/computed display values that should never be edited.
{
"type": "object",
"title": "Text — readonly with default expression",
"description": "Display-only field whose value comes from a JEXL expression evaluated at runtime. Used for derived/computed display values that should never be edited.",
"properties": {
"displayId": {
"type": "string",
"title": "Display ID",
"widget": {
"type": "text",
"readonly": true
},
"default": "${$value.prefix + '-' + $value.id}"
},
"prefix": {
"type": "string",
"title": "Prefix",
"widget": {
"type": "text"
}
},
"id": {
"type": "string",
"title": "ID",
"widget": {
"type": "text"
}
}
},
"layout": [
"prefix",
"id",
"displayId"
]
}
Required with tooltip — 05-required-with-tooltip.json
Required field with a contextual tooltip rendered next to the label (info icon on hover). Combines widget.required (UI marker + runtime validation) with widget.tooltip (i18n-resolved help text).
{
"type": "object",
"title": "Text — required with tooltip",
"description": "Required field with a contextual tooltip rendered next to the label (info icon on hover). Combines widget.required (UI marker + runtime validation) with widget.tooltip (i18n-resolved help text).",
"properties": {
"fullName": {
"type": "string",
"title": "Full name",
"widget": {
"type": "text",
"required": true,
"tooltip": "Use the legal name as it appears on the contract.",
"placeholder": "First and last name"
},
"minLength": 2
}
},
"layout": [
"fullName"
]
}
Gen overflow value hidden — gen-overflow-value-hidden.json
Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.
{
"type": "object",
"title": "Text Item — Disable wrapping",
"description": "Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "text",
"overflowValueHidden": true
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.
{
"type": "object",
"title": "Text Item — Show delete value icon",
"description": "Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "text",
"showClear": true
}
}
},
"layout": [
"field"
]
}
Long text dtl-form-input-textarea
The text area is a multi-line text input field in a form that is used to collect large amounts of text data from the user. Unlike a regular text field, a text area can accommodate multiple lines of text, making it well-suited for collecting longer pieces of information such as descriptions, comments, or feedback. The use of a text area helps to make it easy for users to enter and read large amounts of text data, while also providing a way to ensure that the data collected is accurate and consistent. If you want the user to enter Rich text (such as title, colors, font size, font weight etc., use Rich Text
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "textarea"
}
}
Inputs
Height (px)
Key: widgetHeight
Name: Height (px)
Description: The height in pixels.
Default: ""
Default value
Key: default
Name: Default value
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-textarea/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen widget height — gen-widget-height.json
Height (px): The height in pixels.
{
"type": "object",
"title": "Long text — Height (px)",
"description": "Height (px): The height in pixels.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "textarea",
"widgetHeight": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Mask Field dtl-form-input-mask
The mask field is an input field that uses a predefined format or pattern to guide users in entering data. The format can include symbols or placeholders to indicate the required format, such as a date, phone number, or credit card number. The field automatically applies the formatting as users enter the data, making it easier to enter accurate and consistent data. This helps to reduce errors and improve the quality of the data collected in the form.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Mask",
"widget": {
"type": "mask"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Mask
Key: mask
Name: Mask
Description: maskTooltip
Default: ""
Placeholder
Key: maskPlaceholder
Name: Placeholder
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-mask/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen mask placeholder — gen-mask-placeholder.json
Demonstrates widget.maskPlaceholder = "Enter the value…" on dtl-form-input-mask.
{
"type": "object",
"title": "Mask Field — Placeholder",
"description": "Demonstrates widget.maskPlaceholder = \"Enter the value…\" on dtl-form-input-mask.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-mask",
"maskPlaceholder": "Enter the value…"
}
}
},
"layout": [
"field"
]
}
Gen mask — gen-mask.json
Mask: maskTooltip
{
"type": "object",
"title": "Mask Field — Mask",
"description": "Mask: maskTooltip",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-mask",
"mask": "999-999"
}
}
},
"layout": [
"field"
]
}
Tri state checkbox dtl-form-input-tri-state-checkbox
A tri-state checkbox is a GUI element with three possible states: checked, unchecked, and indeterminate. The indeterminate state is used when the checkbox's status depends on its child checkboxes or specific criteria. It's commonly employed in hierarchical data or groups of related checkboxes. The behavior of a tri-state checkbox can be customized by developers to suit their application's needs.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Tri state checkbox",
"widget": {
"type": "triStateCheckbox"
}
}
Editor dtl-form-input-tiptap
The rich text field, also known as a WYSIWYG (What You See Is What You Get) editor, is a type of text input field in a form that allows users to enter and format text with various styles, such as bold, italic, and underline. This type of text field is well-suited for collecting information that requires visual formatting, such as descriptions or comments. Rich text fields can also include validation to ensure that the entered data meets specific criteria, such as having a minimum or maximum length. The use of a rich text field helps to improve the user experience by allowing users to create visually appealing and well-formatted text, while also providing a way to ensure that the data collected is accurate and consistent.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "tiptap"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Owner Id
Key: ownerId
Name: Owner Id
Default: ""
Owner type
Key: ownerType
Name: Owner type
Description: Owner type
Default: ""
Hide iframe in menu
Key: hideMenuItemIframe
Name: Hide iframe in menu
Default: false
Hide diagram in menu
Key: hideMenuItemDiagram
Name: Hide diagram in menu
Default: false
Hide image in menu
Key: hideMenuItemImage
Name: Hide image in menu
Default: false
Hide attachments in menu
Key: hideMenuItemAttachments
Name: Hide attachments in menu
Default: false
Hide code block insert in menu
Key: hideMenuItemInsertCode
Name: Hide code block insert in menu
Default: false
Hide source code insert in menu
Key: hideMenuItemSourceCode
Name: Hide source code insert in menu
Default: false
Hash suggestions
Key: hashtagOption
Name: Hash suggestions
Description: Hash suggestions
Default: "tickets"
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-tiptap/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen hide menu item attachments — gen-hide-menu-item-attachments.json
Demonstrates widget.hideMenuItemAttachments = true on dtl-form-input-tiptap.
{
"type": "object",
"title": "Editor — Hide attachments in menu",
"description": "Demonstrates widget.hideMenuItemAttachments = true on dtl-form-input-tiptap.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"hideMenuItemAttachments": true
}
}
},
"layout": [
"field"
]
}
Gen hide menu item diagram — gen-hide-menu-item-diagram.json
Demonstrates widget.hideMenuItemDiagram = true on dtl-form-input-tiptap.
{
"type": "object",
"title": "Editor — Hide diagram in menu",
"description": "Demonstrates widget.hideMenuItemDiagram = true on dtl-form-input-tiptap.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"hideMenuItemDiagram": true
}
}
},
"layout": [
"field"
]
}
Gen hide menu item iframe — gen-hide-menu-item-iframe.json
Demonstrates widget.hideMenuItemIframe = true on dtl-form-input-tiptap.
{
"type": "object",
"title": "Editor — Hide iframe in menu",
"description": "Demonstrates widget.hideMenuItemIframe = true on dtl-form-input-tiptap.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"hideMenuItemIframe": true
}
}
},
"layout": [
"field"
]
}
Gen hide menu item image — gen-hide-menu-item-image.json
Demonstrates widget.hideMenuItemImage = true on dtl-form-input-tiptap.
{
"type": "object",
"title": "Editor — Hide image in menu",
"description": "Demonstrates widget.hideMenuItemImage = true on dtl-form-input-tiptap.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"hideMenuItemImage": true
}
}
},
"layout": [
"field"
]
}
Gen owner id — gen-owner-id.json
Demonstrates widget.ownerId = "exampleValue" on dtl-form-input-tiptap.
{
"type": "object",
"title": "Editor — Owner Id",
"description": "Demonstrates widget.ownerId = \"exampleValue\" on dtl-form-input-tiptap.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"ownerId": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner type — gen-owner-type.json
Owner type: Owner type
{
"type": "object",
"title": "Editor — Owner type",
"description": "Owner type: Owner type",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-tiptap",
"ownerType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Password dtl-form-input-password
The password field is an input field in a form that is used to collect sensitive information, such as a password or passphrase. The field is represented by a text box, but the characters entered into the field are obscured and replaced with asterisks or other symbols to protect the confidentiality of the information. Password field also includes additional security features, such as password strength meter.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Password",
"widget": {
"type": "password"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Disable wrapping
Key: overflowValueHidden
Name: Disable wrapping
Description: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.
Default: false
Show delete value icon
Key: showClear
Name: Show delete value icon
Description: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-password/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen overflow value hidden — gen-overflow-value-hidden.json
Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.
{
"type": "object",
"title": "Password — Disable wrapping",
"description": "Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "password",
"overflowValueHidden": true
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.
{
"type": "object",
"title": "Password — Show delete value icon",
"description": "Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "password",
"showClear": true
}
}
},
"layout": [
"field"
]
}
Switch dtl-form-input-switch
The switch is a type of input field in a form that allows users to toggle between two states, such as on/off, yes/no, or true/false. Switch is represented as a small rectangular toggle that can be moved left or right to change its state. It is often used as a more compact alternative to checkboxes for binary decisions, and can also be used in place of radio buttons for single-choice selection. The use of switches helps to simplify the user interface by providing a clear and intuitive way to make binary selections, while also allowing for more compact and aesthetically pleasing forms.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Switch",
"widget": {
"type": "switch"
}
}
Inputs
Left label
Key: leftLabel
Name: Left label
Description: The label, which will be located to the left of the component
Default: ""
Right label
Key: rightLabel
Name: Right label
Description: The label, which will be located to the right of the component
Default: ""
Save on change
Key: saveOnChange
Name: Save on change
Description: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-switch/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen left label — gen-left-label.json
Left label: The label, which will be located to the left of the component
{
"type": "object",
"title": "Switch — Left label",
"description": "Left label: The label, which will be located to the left of the component",
"properties": {
"field": {
"type": "boolean",
"title": "Field",
"widget": {
"type": "switch",
"leftLabel": "top"
}
}
},
"layout": [
"field"
]
}
Gen right label — gen-right-label.json
Right label: The label, which will be located to the right of the component
{
"type": "object",
"title": "Switch — Right label",
"description": "Right label: The label, which will be located to the right of the component",
"properties": {
"field": {
"type": "boolean",
"title": "Field",
"widget": {
"type": "switch",
"rightLabel": "top"
}
}
},
"layout": [
"field"
]
}
Gen save on change — gen-save-on-change.json
Save on change: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper
{
"type": "object",
"title": "Switch — Save on change",
"description": "Save on change: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper",
"properties": {
"field": {
"type": "boolean",
"title": "Field",
"widget": {
"type": "switch",
"saveOnChange": true
}
}
},
"layout": [
"field"
]
}
Autocomplete tsm-autocomplete
The autocomplete field, also known as the "autocomplete" feature, is an interactive input element in a form that provides users with instant suggestions to complete their entries based on previous inputs or a predefined set of options. As soon as the user starts typing in the field, the system dynamically generates and displays a list of relevant suggestions, from which the user can choose, allowing them to quickly and efficiently complete their entry without the need to type out the entire text.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Autocomplete",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "tsm-autocomplete"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
Default: true
Force selection
Key: forceSelection
Name: Force selection
Description: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text that is not part of the list of suggestions.
Default: true
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-autocomplete/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen force selection — gen-force-selection.json
Force selection: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text
{
"type": "object",
"title": "Autocomplete — Force selection",
"description": "Force selection: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-autocomplete",
"forceSelection": false
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show clear: Sets the visibility of the delete button for clearing text in the filtering input
{
"type": "object",
"title": "Autocomplete — Show clear",
"description": "Show clear: Sets the visibility of the delete button for clearing text in the filtering input",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-autocomplete",
"showClear": false
}
}
},
"layout": [
"field"
]
}
Numeric field dtl-form-input-number
The numeric field is an input field in a form that is used to collect numerical data from the user. The field is typically formatted to only accept numbers and can be further customized to restrict the type of numbers that are accepted. For example, the field could be set up to only accept positive numbers, whole numbers, or numbers within a certain range. Validation can also be applied to the numeric field to ensure that the entered data meets specific criteria, such as being within a certain range or having a specific number of decimal places. The use of a numeric field helps to ensure that the data collected is accurate and consistent, and also makes it easier to process the data in downstream applications.
Widget Or Layout: unknown
Value:
{
"type": "number",
"title": "Number",
"widget": {
"type": "number"
}
}
Inputs
Fraction digits
Key: fractionDigits
Name: Fraction digits
Description: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0
Default: 0
Step
Key: step
Name: Step
Description: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on "Number of decimal places".
Default: 0
Mode
Key: mode
Name: Mode
Description: Mode (decimal or currency)
Default: "decimal"
Show buttons for steps
Key: showButtons
Name: Show buttons for steps
Default: true
Default value
Key: default
Name: Default value
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-number/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen fraction digits — gen-fraction-digits.json
Fraction digits: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0
{
"type": "object",
"title": "Numeric field — Fraction digits",
"description": "Fraction digits: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0",
"properties": {
"field": {
"type": "number",
"title": "Field",
"widget": {
"type": "number",
"fractionDigits": 1
}
}
},
"layout": [
"field"
]
}
Gen mode — gen-mode.json
Mode: Mode (decimal or currency)
{
"type": "object",
"title": "Numeric field — Mode",
"description": "Mode: Mode (decimal or currency)",
"properties": {
"field": {
"type": "number",
"title": "Field",
"widget": {
"type": "number",
"mode": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen show buttons — gen-show-buttons.json
Demonstrates widget.showButtons = false on dtl-form-input-number.
{
"type": "object",
"title": "Numeric field — Show buttons for steps",
"description": "Demonstrates widget.showButtons = false on dtl-form-input-number.",
"properties": {
"field": {
"type": "number",
"title": "Field",
"widget": {
"type": "number",
"showButtons": false
}
}
},
"layout": [
"field"
]
}
Gen step — gen-step.json
Step: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on "Number of decimal places".
{
"type": "object",
"title": "Numeric field — Step",
"description": "Step: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on \"Number of decimal places\".",
"properties": {
"field": {
"type": "number",
"title": "Field",
"widget": {
"type": "number",
"step": 1
}
}
},
"layout": [
"field"
]
}
Rating dtl-form-input-rating
The rating field is an input field in a form that allows users to rate or score something along a numerical scale. The field represented by a row of stars, each of which can be clicked or selected to indicate a specific rating. Rating fields can be used to collect customer feedback, product reviews, or other forms of evaluation. They can also be used to collect information about personal preferences, such as movie ratings or book reviews. The use of a rating field helps to simplify the process of collecting numerical data by providing a clear and intuitive way to make selections, while also allowing for flexible and multi-faceted data collection.
Widget Or Layout: unknown
Value:
{
"type": "number",
"title": "Rating",
"widget": {
"type": "rating"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Select dtl-select
The select field, also known as a drop-down menu, is an input field in a form that allows users to select an option from a list of pre-defined options. The field is typically represented by a drop-down list, from which the user can select a single option. The use of a select field helps to simplify the process of collecting data, by providing a clear and concise way for users to make selections. The field can also help to ensure the accuracy and consistency of the data collected, by limiting the available options to a predefined set of values. Select fields can be used to collect a wide range of information, such as geographical locations, job titles, product categories, or any other information that can be represented by a set of predefined options. If you need selecting from TSM based data, use an appropriate component such as "Register value", "Customer segment" or "Account.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Select",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "select"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Select type
Key: selectType
Name: Select type
Default: "__ref:SelectType.Select"
Type
Key: type
Name: Type
Default: ""
Date & Time dtl-form-input-date
The date time field is an input field in a form that is used to collect date and time information from the user. Use configuration to select if the user should input Date and / Or Time parts. The field presents the user with a calendar-style interface, making it easy to select a specific date and time. Date fields may include validation to ensure that the entered data meets specific criteria, such as being within a certain range or being a valid date format.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Date",
"widget": {
"type": "date"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Show icon
Key: showIcon
Name: Show icon
Description: If enabled, the icon will be displayed.
Default: true
Show delete value icon
Key: showCloseIcon
Name: Show delete value icon
Description: If enabled, the delete value icon(X) will be displayed.
Default: true
View Time
Key: showTime
Name: View Time
Description: If enabled the time will be also displayed.
Default: false
Time only
Key: timeOnly
Name: Time only
Description: If enabled, the date will not be displayed.
Default: false
Month and year
Key: monthYear
Name: Month and year
Description: If enabled, the month and year be displayed.
Default: false
Round end date
Key: roundEndDate
Name: Round end date
Description: If "time display" is not checked, the selected date is always rounded to the end of the day.
Default: false
Show pick datetime button
Key: showPickDateTimeButton
Name: Show pick datetime button
Description: Show pick datetime button
Default: true
Min date
Key: minDate
Name: Min date
Default: null
Max date
Key: maxDate
Name: Max date
Default: null
Chip css class
Key: chipClass
Name: Chip css class
Description: CSS class for the dates difference
Default: null
Countdown time from
Key: countdownTimeFrom
Name: Countdown time from
Description: Displayes difference between two dates. (For example: "16.03.2023 (7d 5h 3min)")
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-date/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen month year — gen-month-year.json
Month and year: If enabled, the month and year be displayed.
{
"type": "object",
"title": "Date & Time — Month and year",
"description": "Month and year: If enabled, the month and year be displayed.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"monthYear": true
}
}
},
"layout": [
"field"
]
}
Gen round end date — gen-round-end-date.json
Round end date: If "time display" is not checked, the selected date is always rounded to the end of the day.
{
"type": "object",
"title": "Date & Time — Round end date",
"description": "Round end date: If \"time display\" is not checked, the selected date is always rounded to the end of the day.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"roundEndDate": true
}
}
},
"layout": [
"field"
]
}
Gen show close icon — gen-show-close-icon.json
Show delete value icon: If enabled, the delete value icon(X) will be displayed.
{
"type": "object",
"title": "Date & Time — Show delete value icon",
"description": "Show delete value icon: If enabled, the delete value icon(X) will be displayed.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"showCloseIcon": false
}
}
},
"layout": [
"field"
]
}
Gen show icon — gen-show-icon.json
Show icon: If enabled, the icon will be displayed.
{
"type": "object",
"title": "Date & Time — Show icon",
"description": "Show icon: If enabled, the icon will be displayed.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"showIcon": false
}
}
},
"layout": [
"field"
]
}
Gen show time — gen-show-time.json
View Time: If enabled the time will be also displayed.
{
"type": "object",
"title": "Date & Time — View Time",
"description": "View Time: If enabled the time will be also displayed.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"showTime": true
}
}
},
"layout": [
"field"
]
}
Gen time only — gen-time-only.json
Time only: If enabled, the date will not be displayed.
{
"type": "object",
"title": "Date & Time — Time only",
"description": "Time only: If enabled, the date will not be displayed.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "date",
"timeOnly": true
}
}
},
"layout": [
"field"
]
}
Icon picker tsm-form-input-icon-picker
The icon picker is an input field on a form that is used to select an icon displayed next to the form input field. The icon will be placed on the left or right side of the form field.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Icon",
"widget": {
"type": "tsm-form-input-icon-picker"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""