Intelligence Community Design System

Canary components are unstable components that are released for testing purposes.

We value any feedback from users willing to try them in their applications.

These components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.

For more information on Canary components, read our approach to releases and versions .

Additional details on the props and events for this component can be found in the Canary web components and Canary React storybooks.

Use a date input when asking people for a date they already know or can input without the use of a calendar.

Use a date input to select a past, present or future date. For example, use a date input when asking for a person’s birthday as it may be quicker than navigating through a date picker .

Do not use a date input when asking for parts of a date where some elements may not be known. For example, knowing the month and year, but not the day. Instead, consider using three separate fields for date, month and year, and set all to optional.

Use content styling for help with building effective labels for people using date input.

Use helper text to provide additional information.

Use the date inputdateFormat property to change the default input format between DD/MM/YYYY, MM/DD/YYYY and YYYY/MM/DD. Use differing labels on the helper text and within a date input, when catering for regional input preferences.

Use thedisablePast property when using date input to gather information about future dates, such as hotel bookings.

Use thedisableFuture property when using a date input to gather information about days in the past, such as birthdays.

Set the default date on a date input to help people quickly complete the input by sticking with the default value. For example, set the default date to the next available delivery date when asking for a delivery date preference.

Do not use default date when using date input to collect a date far in the past. For example, do not use “now” as default when asking for date of birth. Instead, use placeholder text of date format until the user selects their input.

Usehtml autofocus to automatically focus a date input when it is the only input on a page.

Do not usehtml autofocus on a date input when it is part of a form with other inputs.

You can copy and paste a complete date into the date input.

Use the date input size properties to change its vertical size and achieve compact or spacious layouts.

Ensure the width of the date input allows enough space for the full length of a person’s potential input.

Use validation on input fields to tell people when any warning or errors occur within their input. The date input component offers some standard validation scenarios as well as a method for creating custom validation scenarios.

Use the custom validation options to configure your own validation scenarios. For example, if it is required that the input date must be after another specific date then use an error validation message if the input date doesn’t meet the condition.

Use error, warning or success validation messages according to the validation scenario.

Use error messaging when the person can’t proceed without fixing their input, and use a warning message when the input can be used, but may not be expected. For example, when capturing a date of birth, show a warning message if it would indicate the person being unreasonably old, such as with 01/01/1880.