sunweb

Form

component form

Definition


The form is the component that it is encapsulating all the form functionality

.c-form Simple

Handlebars

Loading...

Javascript

Loading...

Examples


.c-form Simple with various sizes

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

Inputs

Loading...

Javascript

Loading...

.c-form Simple without submit button

We can hide the default submit button.

Handlebars

Loading...

Javascript

Loading...

.c-form Simple with various element types with form validation

To see distinct field types (input text, date selector and choice list). Also for test validations.

Handlebars

Message 1
Message 2
Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
Loading...

Javascript

Loading...

.c-form Simple with vertical distribution

All fields are aligned vertically because all of them are in distinct fieldsets.

Handlebars

Loading...

Javascript

Loading...

.c-form With different sections and fieldsets

Example showing the usage of several sections and fieldsets with titles configured.

Your details

Personal data

Insert here your personal data as it appears in the passport

Address

Insert here your address data so we can locate you

Your companion

Personal data

Insert here your personal data as it appears in the passport

Address

Insert here your address data so we can locate you

.c-form With recaptcha

Example with recaptcha.

Handlebars

Loading...

.c-form Custom validations

The 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:

Your details

Companion 1

Insert here your address data so we can locate you

Companion 2

Insert here your address data so we can locate you
.c-form With box

It is possible to add a Box component in between the form and sections. The submit button is printed outside of the Box.

c-form Disabled on submit

The disable on submit form adds disables the submit button once the form is submitted.

Handlebars

Loading...

Javascript

Loading...
c-form Loading on submit

The loading on submit form adds the loading state to the button once the form is submitted.

Handlebars

Loading...

Javascript

Loading...