eds-form

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Fields as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the fields as JSON strings:

The fields attribute is a string. The getter will parse it into an array of objects.

Passing Fields as Objects (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the fields directly as an object:

In React

In Vue

Using Nested fields

Nested fields allow us to create dynamic, context-sensitive forms where the display of certain inputs depends on the values of others. In our eds-form component, we implemented nested fields to improve user experience and data integrity.

Overview

EdsFormV2 is a comprehensive form component designed to handle form submission with validation, error handling, and customizable fields.

Key Features:

Configurable validation for fields, including dynamic field validation.
Optionally includes a submit button, which can display a loading state during submission.
Supports file upload, hidden fields, and dynamic field parsing.
Emits form event when the form is submitting/validating or there are field updates.

This component is ideal for implementing complex forms with specific validation and submission behaviors.

Properties

Property	Attribute	Description	Type	Default
`buttonIntent`	`button-intent`	Variant/style intent for the submit button (e.g., primary, secondary).	`"primary" \| "secondary"`	`'primary'`
`clearBtn`	`clear-btn`	If `true`, includes a clear/reset button in the form.	`boolean`	`false`
`clearBtnLabel`	`clear-btn-label`	Label for the clear button	`string`	`'Clear'`
`description`	`description`	The description displayed below the title.	`string`	`'Form Description'`
`errorMessage`	`error-message`	The message displayed when the form submission fails.	`string`	`'Some fields in your form are incorrect.'`
`fields`	`fields`	A JSON string representing the fields in the form. Example: `json [ { "name": "email", "label": "Email", "type": "text", "required": true }, { "name": "password", "label": "Password", "type": "password", "required": true } ]`	`any[] \| string`	`[]`
`formBtn`	`form-btn`	If `true`, includes a submit button in the form.	`boolean`	`true`
`formBtnLabel`	`form-btn-label`	If `true`, includes a submit button in the form.	`string`	`'Submit'`
`formStyle`	`form-style`	Choose between default layout, shadow style, or brand style. - “default”: Standard form layout - “shadow”: Form with shadow effect - “brand”: EBRAINS branded form with left border and shadow	`"brand" \| "default" \| "shadow"`	`'default'`
`groups`	`groups`	New: list of groups, each with `{ id: string, title: string }`	`any[] \| string`	`[]`
`initData`	–	The init data the form will attempt to populate in the provided fields.	`{ [key: string]: any; }`	`{}`
`name`	`name`	The name of the form, used for grouping inputs and identifying the form.	`string`	`'eds-form'`
`setFormUrl`	`set-form-url`	If `true`, includes the current form URL in the submission data.	`boolean`	`true`
`title`	`title`	The title displayed above the form.	`string`	`'Form Title'`

Events

Event	Description	Type
`form`		`CustomEvent<{ event: "input" \| "change" \| "submit"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; }>`

Methods

`getData() => Promise<FormData>`

Returns

Type: Promise<FormData>

`setData(newData: { [key: string]: any; }) => Promise<void>`

Parameters

Name	Type	Description
`newData`	`{ [key: string]: any; }`

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

graph TD;
  eds-form --> eds-input-label
  eds-form --> eds-rating
  eds-form --> eds-input-footer
  eds-form --> eds-nps
  eds-form --> eds-kg-web-services-select
  eds-form --> eds-input-field
  eds-form --> eds-input
  eds-form --> eds-button
  eds-rating --> eds-button
  eds-button --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  eds-nps --> eds-input-label
  eds-nps --> eds-button
  eds-kg-web-services-select --> eds-input-field
  eds-input-field --> eds-input-label
  eds-input-field --> eds-input
  eds-input-field --> eds-input-select
  eds-input-field --> eds-input-file
  eds-input-field --> eds-input-dropzone
  eds-input-field --> eds-input-search
  eds-input-field --> eds-input-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  style eds-form fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS