Date Field

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.

Basic

A date field allows users to enter and adjust date and time values using a keyboard. Each part of the date is shown in its own editable segment.

Event date
mm
dd
yyyy

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Date Field's decked out with several components to make it bangin'.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Date Time Field

You can also use the date field to select both date and time.

Event date
11
28
2024
14
04

Validation

When validation is applied, the date field will show a validation message if the entered value is invalid.

Event date
mm
dd
yyyy

Prefix

A demonstration of how to add a prefix to the date field component for enhanced clarity or customization.

Event date
mm
dd
yyyy

Suffix

A demonstration of how to add a suffix to the date field component to provide additional context or customization.

Event date
mm
dd
yyyy

Controlled

In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.

Thursday, November 28, 2024

2024-11-28

Event date
11
28
2024

Uncontrolled

In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.

Event date
11
28
2024

Readonly

In a readonly date field, the value is provided as a prop, and the field is not editable by the user.

Event date
11
28
2024

Disabled

A disabled date field is non-interactive and visually represented in a disabled state.

Event date
mm
dd
yyyy