InputDate proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.
- Restrictions – numeric characters only
- Mobile keyboard – Tel (numbers only); date picker is not advised for NerdWallet use cases.
- Label – always included, presents clear description of anticipated data
- Placeholder – (MM / DD / YYYY) shows that a specific date format is anticipated.
- Mask – (00 / 00 / 0000) format persists as the user types
- ‘Smart’ default – ok as pre-filled inputs, use best judgement when implementing as placeholder
- Help message – provides examples if needed (e.g. 03 / 12 / 1999); don’t add examples as placeholders.
string | Function
The date format to override. Defaults to MM / DD / YYYY.
'## / ## / ####'
The default label associated with the input field. Should always be supplied to meet accessibility best practices.
String to override the default placeholder text, which is MM / DD / YYYY.
'MM / DD / YYYY'
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 ''.