DateField

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.

Usage

Import

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


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

Appearance

Sorry! There are currently no variants and sizes available.

Props

Property	Type	Default	Description
`label`	`ReactNode`	`none`	The label text.
`description`	`ReactNode`	`none`	A helpful text.
`errorMessage`	`ReactNode`	`none`	An error message.
`error`	`boolean`	`false`	If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
`defaultValue`	`DateValue`	`none`	The default value of the date field.
`value`	`DateValue`	`none`	The value of the date field.
`disabled`	`boolean`	`false`	If `true`, the date field is disabled.
`required`	`boolean`	`false`	If `true`, the date field is required.
`readOnly`	`boolean`	`false`	If `true`, the date field is readOnly.
`onChange`	`function`	`none`	A callback function that is called with the date field's current value changes.
`width`	`string \| number`	`full`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width

Examples

Simple DateField

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

Preview

Code

Disabled DateField

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

Preview

Code

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.

Preview

Code

DateField With an Error

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

Preview

Code