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)

• 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.