Definition
The form is the component that it is encapsulating all the form functionality
Handlebars
Razor
Open in new tabJavascript
Examples
A section with a title and several field elements with distinct sizes in a single fieldset to align all of them horizontally and break them to a new line it's needed.
Handlebars
Razor
Open in new tabJavascript
We can hide the default submit button.
Handlebars
Razor
Open in new tabJavascript
To see distinct field types (input text, date selector and choice list). Also for test validations.
Handlebars
Razor
Open in new tabJavascript
All fields are aligned vertically because all of them are in distinct fieldsets.
Handlebars
Razor
Open in new tabJavascript
Example showing the usage of several sections and fieldsets with titles configured.
Example with recaptcha.
Handlebars
Razor
Open in new tabThe form component implements validations that affect multiple fields. For simple validations such as required, pattern, min value, max value or confirmation of a text, use validations already in place in the simple components.
You can configure to change the pattern of some text inputs if the value of a dropdown changes:
It is possible to add a Box component in between the form and sections. The submit button is printed outside of the Box.
The disable on submit form adds disables the submit button once the form is submitted.
Handlebars
Razor
Open in new tabJavascript
The loading on submit form adds the loading state to the button once the form is submitted.