Date Field

Allows users to input a date in a structured format using separate fields for day, month, and year.

Usage

Import

import { DateField } from "@govtechmy/myds-react/date-field";

Anatomy

export default () => <DateField />;

Examples

Size

Use the size prop to change the checkbox size!

Uncontrolled vs Controlled State

To use the date field in the uncontrolled state, set the defaultValue prop to the initial value of the date field.

To use the date field in the controlled state, set the value prop to the current value of the date field and provide an onValueChange event listener to handle the change.

Uncontrolled

Controlled

Disabled

Date field can be disabled by setting the disabled prop to true. When disabled, the date field will not be interactive.

Invalid

Invalid state is triggered when a date field fails validation. To indicate an invalid date field, set the invalid prop to true.

Props

DateField

Prop	Type	Default
`size`	`enum`	`small`
`defaultValue`	`string`	-
`value`	`string`	-
`onChange`	`(date: string ) => void`	-
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`

MYDS