Input

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

Demo

{{> eds-c-input}}

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.

Installation

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

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

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, install the following components in the following order:

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

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

Then, import the styles of the input into your scss file:

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

Templates

Use the input component together with the EDS Form component.

Use the form template and read the schema file.

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.

Properties

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

Input can be block, which is the default, or inline.

For more information on the inline input object shape, go to the schema file.

The inline input has an inlineInputs array. Here you can pass the input objects you need. On every inline input object, set the uiSettings.inline property to true.

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.

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.