Current behavior

A form can be rendered with collapsible sections, based on how the schema is structured.

A collapsible section can contain invalid fields. Individual fields (e.g. limel-input-field) nested inside the limel-collapsible-sections (which can have their own native validations or custom validations) can be invalid.

This can happen either:

• when the form is loaded with invalid fields, or
• after some actions are done by the consumer, for example saving a form after the user has input some values in the form fields, can trigger a validation process.

After validations are run, some form fields can then become invalid, for example those which are required but left empty by the user, or those which have an invalid value format.

In the current implementation of the limel-form component, the limel-collapsible-sections do not show any signs that they have one or more invalid fields inside. Therefore, if the collapsible section is closed, the user will have a really hard time understanding which collapsible section has the validation problem.

Expected behavior

Collapsible section have an invalid boolean prop, which can instead be set to true, if the section of the form contains invalid fields.