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.'`
`estimatedTime`	`estimated-time`	Optional “time to complete” hint shown as a meta chip in the `brand` hero header (e.g. “~6 minutes”). Brand style only.	`string`	`undefined`
`expires`	`expires`	Optional expiry label shown as a meta chip in the `brand` hero (e.g. “Closes Jun 28, 2026”). Brand style only.	`string`	`undefined`
`eyebrow`	`eyebrow`	Small mono eyebrow shown above the title in the `brand` hero header (e.g. a programme or category label). Brand style only.	`string`	`undefined`
`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'`
`gdpr`	`gdpr`	Show the “GDPR compliant” meta chip in the `brand` hero header. Default OFF — it’s an unverified compliance claim, so it must be opted into explicitly (per form) rather than advertised on every brand form.	`boolean`	`false`
`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'`
`policy`	`policy`	Optional submission-policy label shown as a meta chip in the `brand` hero (e.g. “You can submit this form only once.”). Brand style only.	`string`	`undefined`
`progress`	`progress`	Completion percentage (0–100) shown as a “X% complete” chip in the `brand` hero — the single-page equivalent of the multi-step progress. Host-driven (e.g. filled required fields); omit/undefined to hide. Brand style only.	`number`	`undefined`
`saveLabel`	`save-label`	Autosave label next to the dot (e.g. “Saved 5:01 PM”). Empty hides the whole save-state cluster. Brand footer only.	`string`	`undefined`
`saveStatus`	`save-status`	Autosave state shown at the left of the brand footer (host-driven). The dot pulses grey while saving and settles green when saved.	`"error" \| "idle" \| "saved" \| "saving"`	`'idle'`
`setFormUrl`	`set-form-url`	If `true`, includes the current form URL in the submission data.	`boolean`	`true`
`status`	`status`	Lifecycle state for the brand style (drives the hero eyebrow, glow tint and expiry meta-chip colour). “closed” additionally disables every field, desaturates the body and replaces the submit with a dead “Submissions closed” footer. No effect outside form-style=“brand”. - “open”: accepting submissions (default) - “expiring”: accepting but closing soon (amber) - “closed”: expired / not accepting (red, read-only)	`"closed" \| "expiring" \| "open"`	`'open'`
`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; cleared?: 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-search-select
  eds-form --> eds-kg-web-services-select
  eds-form --> eds-input-field
  eds-form --> eds-logo
  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-search-select --> eds-input-label
  eds-search-select --> eds-icon-wrapper
  eds-search-select --> eds-input-footer
  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-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  style eds-form fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS