Form component

The form component is a container for all of our form inputs.

Demo

{{> eds-c-form}}

When to use this component

You must use the form component for all forms.

How it works

The Form component must have at least 1 input and a submit button used inside it for it to work.

Go to the input component documentation.

Installation

To install the components, go to the get started guide for developers.

To use the Form component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

First import the styles of the eds-c-form into your scss file:

@import '../path/to/node_modules/@springernature/elements/components/eds-c-form';

Your form elements inputs will also need other components like label or error messages in order to be used correctly.
Require the styles of the other components in the following order:

@import '../path/to/node_modules/@springernature/elements/components/eds-c-error-summary;

@import '../path/to/node_modules/@springernature/elements/components/eds-c-label;

@import '../path/to/node_modules/@springernature/elements/components/eds-c-hint;

@import '../path/to/node_modules/@springernature/elements/components/eds-c-error-message;

Configuration

You can find helpful guidance on native form configurations in the Mozilla developer documentation.

Properties

For more detailed information on how to use the properties correctly, go to the schema file.

This table outlines the most important properties.

Name	Description	Required
formAttributes	[array] pass an object inside the array, for example { "name": "method", "value": "POST" } to use the form attributes that you need. See form schema file.
dataAttributes	[array] you can pass data attributes, check the form schema file to see what values are allowed.
errorSummary	[object] check the error-summary schema file.
inputs	[array] This array allows you to use as many of the eds-c-input components as you need.	✅
buttons	[array] This array allows you to use as many of the eds-c-button components as you need.	✅

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channel.