# Input

The Input component lets users enter information directly into a field.

## Demo

{% demo 'A input', 'edsInputDemo', demos.edsInputDemo, component.brand %}

## When to use this component

Use the Input component to let users enter text, number, URL, password or search information.

## How it works

To use the Input component, you also have to use the [Form component](https://elements.springernature.com/components/springernature/eds-c-form/).

### Installation

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

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

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

### Styles

All form components require some other components to work correctly. These enable the label, hint, error summary message and error summary.

To use the Input component, require the styles of the following components in the following order: 

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

```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;
```

The Input component uses common input style rules defined in the Form component and doesn't have any specific styles. 

### Templates

Use the input component together with the [EDS Form component](https://elements.springernature.com/components/springernature/eds-c-form/).

Use the [form template](https://github.com/springernature/elements/blob/main/components/eds-c-form/eds-c-form.hbs) and read the [schema file](https://github.com/springernature/elements/blob/main/components/eds-c-form/data/eds-c-form.schema.json).

You can pass the Input component in the inputs array as many times as you need.

### Configuration

Use the Input component for the following types: 

- text 
- password 
- email 
- tel 
- hidden 
- search 
- number 
- url

We are working on separate components for other input types such as checkboxes or radios.

For the submit button of your form, use the [Button component](https://elements.springernature.com/components/springernature/eds-c-button/).

#### 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-input/data/eds-c-input.schema.json).

The input is set to `block` by default. To place a button next to an input on the same line, use the individual components together with the layout component that suit your needs.

## Example usage

```html
    {% raw %}
    <div class="l-cluster l-cluster--bottom">
        {{#with searchInput}}
            {{> eds-c-input}}
        {{/with}} 
        {{#with searchBtn}}
            {{> eds-c-button}}
        {{/with}}                          
    </div>
    {% endraw %}
```

The Input component uses other components such as label, hint and error message.

The error message requires the `errorPrefix` property. This must be a string with a value of “Error:”. This is to clearly identify errors to screen reader users.

If you want to visually hide “Error:” from your error message, you can set the property `screenReaderOnlyErrorPrefix` to `true`. This will hide it visually, but will keep it available for screen reader users.

| Name           | Description                     | Required |
| -------------- | ------------------------------- | :------: | 
| inputId        | [string] the id of the input    |    ✅    |
| inputType      | [string] one of the above types |    ✅    |
| name           | [string]                        |    ✅    |
| value          | [string]                        |          |     
| label         | [object] see [eds-c-label schema file](https://github.com/springernature/elements/blob/main/components/eds-c-label/data/eds-c-label.schema.json) and [eds-c-hint schema file](https://github.com/springernature/elements/blob/main/components/eds-c-hint/data/eds-c-hint.schema.json)                              |    ✅     |     
| required       | [boolean]                              |          |     
| disabled       | [boolean]                              |          |
| error          | [object] see [eds-c-error-message schema file](https://github.com/springernature/elements/blob/main/components/eds-c-error-message/data/eds-c-error-message.schema.json) |        |
| hidden         | [boolean]                                 |          |
| readonly       | [boolean]                                 |          |
| max            | [number]                                 |          |
| maxlength      | [number]                                |          |
| minlength      | [number]                                |          |
| autocomplete   | [boolean]                                |          |
| novalidate     | [boolean]                                |          |
| multiple       | [boolean]                                |          |
| pattern        | [string]                                |          |
| datalist       | [object]                                |          |
| dataAttributes | [object]                                |          |
| buttons        | [object] see [eds-c-button schema file](https://github.com/springernature/elements/blob/main/components/eds-c-button/data/eds-c-button.schema.json)                                |          |
| uiSettings     | [object] contains the visual settings for the user interface. |          |
