Date Field
Date Fields allow users to input an exact date.
Overview
Date fields should be used when collecting a date that is familiar or that can easily be looked up.
Usage
Date fields take a date object, which consists of string values for day, month and year. They do not include validation.
Content
- Always provide an example in the hint text such as “For example, 21 7 1997”.
- Always be tolerant of mistakes like extra spaces or differing formats. Allow both “07” and “7” for example.
Accessibility
- Always focus the first first input when they click the label or when linking from the ErrorSummaryNotification component.
Variations
Validation Error
All inputs recieve the error state even if the error relates only to one of them.
Full Width
Date fields by default will be responsive and will be displayed as full width below the smallest breakpoint. This can be overriden this by setting fullWidth="always" and fullWidth="never".
Properties
| Name | Values | Default |
|---|---|---|
id (required) | String | |
name | String | |
label (required) | String | |
optional | Boolean | false |
hint | ReactNode | |
error | ReactNode | |
characters | Number | 25 |
fullWidth | alwaysneversmall | small |
value (required) | { day: string; month: string; year: string; } | |
onChange (required)(newValue) => null | Function | |
readOnly | Boolean | false |
data-testid | String |