This library supports the following features:

• Renders various input elements based on parameters (Fields) that describe them.
• Populates data (Data) into input elements from a JSON document.
• Validates the form on submission using HTML5 validation attributes.
• Sends form data as a JSON document upon submission (OnSubmit).

Supported Form Elements

The form elements you can use with the widget are limited to the following input types:

Text Inputs

• Text - A single-line text field. This is the default value for an input element.
• Textarea - A multi-line text field.
• Password - A single-line text field where the input is obscured to protect sensitive information.
• Email - A field specifically for entering one or more email addresses. Validation ensures that the text entered is a valid e-mail address.
• Search - A single-line text field for entering search queries. It may include a control to clear the entered text.
• Tel - A field for entering a telephone number. Unlike email, it doesn't enforce a specific syntax, but it may trigger a numeric keypad on mobile devices.
• Url - A field for entering a URL. The browser may provide validation to ensure the text is in a valid URL format.

Date and Time Inputs

• date - A control for entering a date (year, month, and day).
• time - A control for entering a time (hour and minute).
• datetime-local - A control for entering both a date and time, without time zone information.
• month - A control for entering a month and year.
• week - A control for entering a week and year.

Numeric Inputs

• number - A field for entering a number.

Selection Inputs

• radio - A radio button that allows the user to select only one option from a group of choices.
• checkbox - A checkbox that allows the user to enable or disable.

All input elements are displayed in the order specified by the Fields input parameter of the widget.

Field Configurations and Validations

Input field configurations and validations are divided into two parts: a common set of configuration elements that apply to all supported form elements, and type-specific settings that apply only to individual form element types.

Common

The following settings apply to all types:

• Name - The name attribute of the form element. This name also becomes the attribute name of the JSON data document you receive when you submit the form.
• Type - The input element's type attribute. The FieldType static entity provides the supported element types as described above.
• Label - If present, the widget adds an extra tag for the form element.
• Text - If present, this text is displayed right above the form element. You can use it to add extra descriptions or guidance for the form element.
• Placeholder - If present, it sets the placeholder attribute of the form element.
• IsRequired - If set to True, it adds the required attribute to the form element, making user input necessary.
• IsDisabled - If set to True, it adds the disabled attribute to the form element. When the form is submitted, data from disabled elements is excluded.
• IsReadOnly - If set to True, it adds the readonly attribute to the form element. Data from readonly elements is included when the form is submitted.
• HasAutoFocus - Sets the autofocus attribute for the form element. Ensure that only one element has autofocus.
• TabIndex - Defaults to 0. When set, this configures the tab order of the element.

Type-specific

Type-specific settings are found in the Config object. Depending on the chosen input type, the following settings apply.

For text, textarea, password, email, search, tel and url the following settings apply:

• MinLength - Specifies the minimum number of characters the user must enter for the input to be considered valid.
• MaxLength - Specifies the maximum number of characters the user can enter into the input field.
• Pattern - Specifies a regular expression that the input field's value is checked against. It allows for complex validation rules.
• Autocomplete - Specifies whether a browser should automatically complete the input based on values the user has entered previously. Can be set to "on" or "off".
• Rows (only applicable to textarea) - The number of rows of the multi-line text input element.

For date, time, datetime-local, month and week:

• Min - Specifies the earliest date/time/month/week that can be selected.
• Max - Specifies the latest date/time/month/week that can be selected.

For number:

• Min - Specifies the minimum allowed value for the input.
• Max - Specifies the maximum allowed value for the input.
• Step - Specifies the legal number intervals (e.g., step="2" allows 0, 2, 4...). any allows any value.

For radio and checkbox:

• IsChecked - A boolean attribute that specifies if a checkbox or radio button should be selected by default when the page loads.
• Options (Radio only) - A list of Label/Value pairs for the radio options to select from.

Most of the settings above are related to validation, and the library uses the browser's built-in form validation. You can read more about this client-side form validation on MDN.