# Form component

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

## Demo

{% demo 'A form', 'edsFormDemo', demos.edsFormDemo, component.brand %}

## 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](https://elements.springernature.com/components/springernature/eds-c-input).

### Installation

To install the components, [go to the get started guide for developers](https://github.com/springernature/elements).

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

```bash
npm install @springernature/elements
```

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

```scss
@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: 

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

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

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

```scss
@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](
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).

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](https://github.com/springernature/elements/blob/main/components/eds-c-form/data/eds-c-form.schema.json).

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](https://github.com/springernature/elements/blob/main/components/eds-c-form/data/eds-c-form.schema.json). |       |
| dataAttributes      |  [array] you can pass data attributes, check the [form schema file](https://github.com/springernature/elements/blob/main/components/eds-c-form/data/eds-c-form.schema.json) 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](https://github.com/springernature/elements/blob/main/components/eds-c-form/data/eds-c-form.schema.json) to see what values are allowed. |       |
| errorSummary | [object] check the [error-summary schema file](https://github.com/springernature/elements/blob/main/components/eds-c-error-summary/data/eds-c-error-summary.schema.json).                        |       |
| inputs           |  [array] This array allows you to use as many of the [eds-c-input components](https://elements.springernature.com/components/springernature/eds-c-input) as you need.  |    ✅    |
| buttons          | [array] This array allows you to use as many of the eds-c-button components as you need. |     ✅     |   
