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.
label
= 'Percent'
string
The default label associated with the input field. Should always be supplied to meet accessibility best practices.
numberOfDigits
= 2
string | number
Enables ability to limit the number of digits the input allows in total. Defaults to 2.
placeholder
= '%'
string
String to override the default placeholder text, which is "%".
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 ''.