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: widget
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: widget
Value:
{
"type": "string",
"title": "Link",
"widget": {
"type": "link"
}
}
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: widget
Value:
{
"type": "string",
"title": "Text",
"widget": {
"type": "text"
}
}
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: widget
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "textarea"
}
}
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: widget
Value:
{
"type": "string",
"title": "Mask",
"widget": {
"type": "mask"
}
}
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: widget
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: widget
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "tiptap"
}
}
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: widget
Value:
{
"type": "string",
"title": "Password",
"widget": {
"type": "password"
}
}
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: widget
Value:
{
"type": "boolean",
"title": "Switch",
"widget": {
"type": "switch"
}
}
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: widget
Value:
{
"type": "string",
"title": "Autocomplete",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "tsm-autocomplete"
}
}
Inputs
Default value
Key: default
Name: Default value
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
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.
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: widget
Value:
{
"type": "number",
"title": "Number",
"widget": {
"type": "number"
}
}
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: widget
Value:
{
"type": "number",
"title": "Rating",
"widget": {
"type": "rating"
}
}
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: widget
Value:
{
"type": "string",
"title": "Select",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "select"
}
}
Inputs
Default value
Key: default
Name: Default value
Select type
Key: selectType
Name: Select type
Type
Key: type
Name: Type
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: widget
Value:
{
"type": "string",
"title": "Date",
"widget": {
"type": "date"
}
}
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: widget
Value:
{
"type": "string",
"title": "Icon",
"widget": {
"type": "tsm-form-input-icon-picker"
}
}