InputDate

Status: Stable

Latest released: March 2020

Current version: v9.9.12

Storybook
GitHub

The InputDate field is a form element containing a label and a date input field with an optional placeholder attribute. The date input field is restricted to numeric characters only.

Hero Image
  1. Field: The area or box that holds the input.
  2. Label: The text above the field that describes the information needed.
  3. Placeholder (optional): The gray text in the field that hints at the format of the information required.
  4. Help message (optional): The text below the field that helps a user understand the input and successfully enter a correct value.
  5. Error message (conditional): The text below the input field and the help message shown when an error has occurred.

Variants

Default

Error

Disabled


Design guidelines

InputDate allows numeric characters only

Do
Use numeric characters for date inputs.
Don't
Use any letters or special characters for user inputs.

Always include a label

Do
Include a label that is descriptive to educate the user on what information should be entered.
Don't
Leave out a label or make the verbiage confusing.

Use helper text to provide formatting options

Do
Use optional helper text when you see fit.
Don't
Include helper text that is redundant.

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