Money input

Money input lets users enter an amount in a currency of their choice or validate a prefilled currency.

Money input
When to use

Use a money input:

  • to allow users to insert a monetary value and currency
  • when users need to send or convert an amount

Don't use a money input:

  • if users only need to enter a non monetary value (try a text input instead)
  • if users only need to select currencies (use a dropdown instead)

Best practice
  • Use a read-only money input when users need to send or convert but cannot select a currency.
  • Keep the label concise and related to the action.
  • Disable the currency selector when people have to send or convert from a balance.
  • Enable the currency selector when users are transferring money.
  • Provide an icon to perform additional actions and to display non critical information.


Use the money input contextually within flows where the user is sending or converting money.

On web, currency selector options are displayed in a panel. On mobile web they are displayed in a bottom sheet.

On mobile, currency selector options are displayed inside a full page surface.


The interactive parts of the money input are the text input, icon and the currency selector.

Selecting the text input allows the user to type a value.

Clicking or tapping the currency selector trigger shows the user a list of selectable currency options or actions.

Clicking or tapping on the icon performs additional actions and displays extra non critical information.


The content around the money input should make it clear to users as to what information they need to enter.

For currencies, write [Currency code] + [Currency name]. For example, ARS Argentine Peso. Or AUD Australian dollar.

Don't use currency symbols, because some symbols (like $) could mean multiple different currencies.

Currency names

For currency names:

  • capitalise the country name, but not the currency

  • keep it singular, and don't add an 's'

  • remember to include special characters

Option group

Make sure you use relevant option group section titles for popular categories.

Input label

Label copy should be accurate and make it clear what will happen.

Money input with an accurate label.
Money input with an inaccurate label.



Developer documentation




Web documentation