Input

Standard Input

Input Fields are text fields that are used so users can provide a custom value like a names or numbers. They have various different visual styles depending on the OS and their specific state.

Use the respective Figma Component Variants to make sure the styling is correct.

It is considered best practice to limit the usage of input fields to one per view. This way, either the Page Title or Section Header can be used as a “label” to provide information for the user which type of input is expected.

Open in Figma

Similar to Cells, Input Fields can feature a leading icon which provides a visual hint to the expected input.

Open in Figma

In addition, a trailing icon can be used to trigger actions to fill the input field without typing manually. Examples are: launching the camera to scan a code instead of typing it, or opening the address book to select a contact instead of typing.

Open in Figma

Once the input field received input by the user, a “delete” icon is shown on the right hand side which makes it possible to delete the input with one tap.

Open in Figma

Floating Labels

The Android specific feature to show a floating label on text fields does not work with our design principle of background & surface colors.
Use them only if you can group multiple input fields inside a card.

Open in Figma

Multiline Text Input

Use this component when the expected input value exceeds the typical length of a single line, and should not appear truncated.

Open in Figma

IBAN Input

This is a special variant with specific built in validation mechanisms to verify different bank account inputs in George.

• The leading icon switches to the corresponding flag once the country of the account is recognized.
• Input is separated into groups of 4 to increase readability.
• The input field switches to an error state if an invalid number is provided.

Open in Figma

Search Input

This is a special variant built for instances where the input is used to trigger a request to the backend to return a number of elements as a result.

• The leading icon is always the “magnifying glass”.
• It is often paired with Filter Chips to offer additional options to the user.

Open in Figma

Amount Input

This is a special variant built for instances where a featured input for a numeric amount is needed. It has a number of settings that could not be achieved by using a standard input field.

Currency Add-on

An element below or next to the value that can show

• a fixed currency as a text string
• a fixed currency with a flag-asset and text string
• a button that opens a sheet or modal to change the selected currency

Open in Figma

Open in Figma

Additional Elements

In addition to the currency add-on, the big amount input can feature

• a description text
• a group of quick-selection buttons that alter the input to the respective value (only available in the Large Variant)
• an alert that appears depending if the given input triggers a specific rule
• a stepper input that enables the increase/decrease of the input value without typing (only available in the Small Variant)

PIN Input BETA

There are multiple instances in George where a PIN or Code input is required. However, there is currently no aligned solution for it available. Once this has happened, a Figma Component and specifications for an aligned implementation will be published.

Open in Figma