# 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://eds.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).

#### 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. |       |
| 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://eds.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. |     ✅     |   

## 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](https://springernature.slack.com/archives/CNBTFLBLP) Slack channel.
