Components/Forms/Input Group

fd-input-group · 6 examples from SAP's documentation · Back to the gallery

About

No description in the documentation.

Default

Basic Input Group with no additional elements or value state modifiers.

Enter amount in US dollars

TextAddOn

An Input Group with a text add-on (e.g., currency or unit). The add-on can be positioned before, after, or on both sides of the input field to clarify the expected value format.

Enter amount in US dollars
Enter amount in euro
Enter amount in euro
Enter amount in US dollars

InputWithIcons

Demonstrates how to use an icon as an add-on. Typically used for visual cues like visibility toggles, status, or type indication.

Employee name
Enter content to toggle visibility
Right-aligned input for secure entry

InputWithActions

An Input Group with a button add-on. Supports buttons with either text or icons, typically used for actions like submit, search, or trigger.

States

Input Groups can visually represent different validation or feedback states such as success, error, warning, and information. Use modifier classes like `.is-success`, `.is-error`, `.is-warning`, or `.is-information` on the `.fd-input-group` container.

Value State Success
Value State Error
Value State Warning
Value State Information
This field cannot be edited
Value cannot be changed

Focus

The focussed state of Input Group is achieved by adding the `.is-focus` class to the parent element with class `.fd-input-group`.

Enter an amount in USD
Value State Error: The entered value is invalid.
Value State Success: The value entered is valid.
Value State Warning: Please double-check this value.
Value State Information: The input is optional.