# Single-Input Date Field

Date field (single-input) provides date entry, using a text field, in a single input.

## Guidance

### When to use

- Use the date input when your user flow does not require separate fields for month, day, and year.
- Use the date input for most dates, particularly memorable dates like date of birth, marriage date, health coverage start or end dates, or income start date.

## Guidelines

### Usage

Allow users to have flexibility in entering the date, such as allowing one-digit numbers with or without "0" prior to the number, or entering a date with or without slashes to separate month, day, and year.

- Example: "1" as well as "01" for a month or day.
- Example: "05/01/2022" as well as "05012022".

### When to consider alternatives

- Don't use if users are entering a date within the last year or a future date. Instead, use the [date picker](/components/date-field/date-picker/).

## Accessibility

- These text fields should follow the [accessibility guidelines for all text inputs](/components/text-field/#guidance).
- Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.

### Accessibility testing

#### Screen reader testing

- Screen readers should announce that the date field is editable.
- If the field already has content within it, the screen reader should announce the existing contents.
- Screen readers must announce text fields and their labels in the same order they appear visually on the page.
- Screen readers must also announce if a field is required.

#### Keyboard testing

- Using only a keyboard, you can navigate to the date field, type in it, and navigate away from it.
- The field should have a visible focus indicator and highlight any existing contents when navigated to.