Form component
The form component is a container for all of our form inputs.
Demo
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/elementsStyles
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.
Every form should have a visible title that describes what the form is for. You can then use this title to provide an accessible name for the form using aria-labelledby.
The form element is not exposed as a form landmark by default. It only becomes exposed as such when it is given an accessible name.
Not all forms should be exposed as landmarks. For example, if the form is the main content of the page, it does not need to be exposed as a landmark.
Too many landmarks will make the page harder to use for assistive technology users.
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. | |
| formHeading | [object] This object allows you to add an accessible name and a visual label to the form, 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.