InputPercent

Status: Stable

Latest released: March 2020

Current version: v9.9.12

Storybook
GitHub

InputPercent proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.

Best practices

  • ‘Smart’ value – ok as placeholders or pre-filled input
  • Help message – provides additional formatting expectations (for example ‘e.g. 20%; don’t add examples as placeholders
  • Label – always included, presents clear description of anticipated data
  • Mask – (00%) data formats as a user types
  • Mobile keyboard – Tel (numbers only)
  • Placeholder – (%) shows that a percent value is anticipated. The percent sign persists as the user types to keep context front-of-mind
  • Restrictions – 3 numeric characters only; default width decreased to reflect anticipated value
  • Width – default decreased to reflect anticipated value

Variants

Priority

Development

import InputPercent from '@nerdwallet/react-formatted-input/input-percent';
<InputPercent />;

Props

<InputPercent>

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

'Percent'

numberOfDigits

string | number

Enables ability to limit the number of digits the input allows in total. Defaults to 2.

Default

2

placeholder

string

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

Default

'%'

value

string | number

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

Default

''