Date inputNew: New

Features

• Allows users to select dates using a date picker interface
• Automatically sets placeholder based on browser and system locale settings
• Compatible with our Form control component
• Adheres to our form accessibility guidelines.

When to use

Use the date input component when you need users to input a date value. It is a more user-friendly way of inputting dates than a text field, since it handles date formatting and validation, and provides a Date picker interface out of the box.

Examples

Label

The label of a form element should be clear and concise, ideally under three words. It should describe the value of the element and not what the user needs to do in order to fill it out properly.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" onChange={(value) => {}} value="2025-01-01" />
</FormControl>

Required or optional

Mark the minority of form elements in a form as required or optional. This helps users scan the form and understand what is required of them. Type out the word optional or required in the label. E.g. "Per purchase limit (optional)". Don't use asterisks or other symbols.

<FormControl maxWidth="240px">
    <FormControl.Label>Date (required)</FormControl.Label>
    <DateInput name="date" onChange={(value) => {}} value="2025-01-01" isRequired />
</FormControl>

Hint text

Use hint text to give users clear guidance for data entry. Keep it brief and avoid repeating the label or other form details. If it feels redundant, try removing it. We keep help text above the input field to have the reading order match the visual order, which is needed for screen readers.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <FormControl.HintText>Enter date in DD/MM/YYYY format</FormControl.HintText>
    <DateInput name="date" onChange={(value) => {}} value="2025-01-01" />
</FormControl>

Help popover

Use help popovers to aid first-time users or to clarify complex concepts. The help popover can contain interactive content and may be used to provide links for further information.

<FormControl maxWidth="240px">
    <FormControl.LabelWrapper>
        <FormControl.Label>Renewal date</FormControl.Label>
        <FormControl.Help aria-label="Learn more about: Renewal dates">
            The renewal date is the deadline to update recurring expenses like subscriptions or
            licenses. Missing this date means the service is discontinued, potentially causing
            operational disruptions and extra reactivation costs.
        </FormControl.Help>
    </FormControl.LabelWrapper>
    <DateInput name="date" onChange={(value) => {}} value="2025-01-01" />
</FormControl>

Error

Provide clear and helpful error messages that guide users toward a solution. Instead of merely stating the problem, ensure the message is specific and actionable. Avoid vague or shaming language.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" onChange={(value) => {}} isRequired isInvalid />
    <FormControl.Error>Enter a date</FormControl.Error>
</FormControl>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

<FormControl maxWidth="240px" skeleton>
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" onChange={(value) => {}} skeleton />
</FormControl>

Disabled

Disable a form element to indicate that it’s currently unavailable. This can be used to maintain layout consistency and communicate that the element may become available later. If the form element will never be available in a given context, leave it out.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" onChange={(value) => {}} value="2025-01-01" disabled />
</FormControl>

Min / max date

It's possible to set a min and/or max date for the date input. This will limit the available options both in the date input itself and in the date picker.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" minDate={new Date('2025-01-01')} maxDate={new Date('2025-12-31')} />
</FormControl>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

Related components

• Currency input: An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
• Date picker: A form element used to select a single or a range of dates.
• Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
• Input: A form element that enables users to enter a single line of text.