InputDate

Status: Stable

Latest released: March 2020

Current version: v9.9.7

Storybook
GitHub

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.

Variants

Priority

Development

import InputDate from '@nerdwallet/react-formatted-input/input-date';
<InputDate />

Props

<InputDate>

format

string | Function

The date format to override. Defaults to MM / DD / YYYY.

Default

'## / ## / ####'

label

string

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

Default

'Date'

placeholder

string

String to override the default placeholder text, which is MM / DD / YYYY.

Default

'MM / DD / YYYY'

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