Skip to content

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.

Date of birthFor example, 21 7 1997

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.

Date of birthFor example, 21 7 1997Enter your birthday

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

Date of birthFor example, 21 7 1997

Properties

NameValuesDefault

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

readOnlyReact Native should instead use the `editable` property

Boolean

false

data-testidReact Native should instead use the `testID` property.

String

Tokens