Component for input forms.

The <DateField> allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment.

The <DateField> segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.



To import the component you just have to use this code below.

import { DateField } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelReactNodenoneThe label text.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
defaultValueDateValuenoneThe default value of the date field.
valueDateValuenoneThe value of the date field.
disabledbooleanfalseIf `true`, the date field is disabled.
requiredbooleanfalseIf `true`, the date field is required.
readOnlybooleanfalseIf `true`, the date field is readOnly.
onChangefunctionnoneA callback function that is called with the date field's current value changes.
widthstring | numberfullSets the width of the field. You can see allowed tokens here:


Simple DateField

This example shows a regular <DateField> without any special props.

Date field
This is description

Disabled DateField

You can disable the <DateField> so that the user can't interact with it anymore.

Field Disabled
This field is disabled

Required DateField

If you want a <DateField> to be required, you just have to add the property required. With that the small required icon appears next to the label.

required field

DateField With an Error

This example shows how to use the error with the errorMessage.

Date field
Something went wrong !