InputMoney

Status: Stable

Latest released: March 2020

Current version: v9.9.12

Storybook
GitHub

InputMoney provides mobile users with the appropriate keyboard for easy data entry.

Best practices

  • Label – always included, presents clear description of anticipated data
  • Restrictions – numeric characters only
  • Mobile keyboard – Tel (numbers only)
  • Default placeholder – (\$) shows that a money value is anticipated. The dollar sign persists as the user types to keep context * front-of-mind
  • Mask – (\$0,000) data formats as a user types
  • Help message – provides additional formatting expectations (for example ‘e.g. \$5,000); don’t add examples as placeholders
  • ‘Smart’ value – ok as placeholders or pre-filled input

Variants

Priority

Development

import InputMoney from '@nerdwallet/react-formatted-input/input-money';
<InputMoney />;

Props

<InputMoney>

allowNegative

boolean

Flag to enable the user to be able to supply a '-' to indicate the value should be negative.

Default

false

label

string

The default label associated with the input field. Should always be supplied to meet accessibility best practices.

Default

'Money'

placeholder

string

String to override the default placeholder text, which is "$".

Default

'$'

value

string | number

Required

In general all input components should be controlled, which means their value is passed into the component, and state is maintained within the React component as opposed to using refs from the DOM.

Although generally required, default to ''.