Currency input

The user needs to enter a monetary value.

Problem

The user needs to enter a monetary value.

Solution

Be aware of localization settings and provide multiple currency support if required.

Use a scroller control with or without a conversion engine for supporting multiple currencies.

Use a numpad for letting the user enter values quickly.

Use the slider for quick, inline selection.

Use the stepper whenever the user needs to quickly adjust the value without the need to open up an additional control.

When working with price ranges you’ll have the choice between multiple UI controls like the scroller, numpad or slider. Make sure the user selects a valid range.

There are situations where suggested values help. Providing presets will increase donations for example.

Showing 6 live examples
Scroller
Scroller
Numpad
Numpad
Slider
Slider
Convert
Convert
Range scroller
Range scroller
Presets
Giving feels good
Presets
This example should be experienced in full screen
View in full screen

Problem

The user needs to enter a monetary value.

Solution

Be aware of localization settings and provide multiple currency support if required.

Use a scroller control with or without a conversion engine for supporting multiple currencies.

Use a numpad for letting the user enter values quickly.

Use the slider for quick, inline selection.

Use the stepper whenever the user needs to quickly adjust the value without the need to open up an additional control.

When working with price ranges you’ll have the choice between multiple UI controls like the scroller, numpad or slider. Make sure the user selects a valid range.

There are situations where suggested values help. Providing presets will increase donations for example.

Share in SMS
  • SMS
  • Email