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.

  • Scroller
  • Numpad
  • Slider
  • Convert
  • Range scroller
  • Presets
Showing 6 live examples
Scroller
Scroller
Numpad

Automatically top up account

Top up from credit card if account falls bellow $10
Numpad
Slider

Price Range

from $100 to $500
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