<DateField aria-label="Meeting date">
<DateInput />
</DateField>pnpm dlx shadcn@latest add @dotui/date-fieldUse DateField to allow users to enter and edit date values using a keyboard.
import { DateField } from "@/components/ui/date-field";
import { DateInput } from "@/components/ui/input";
import { Label } from "@/components/ui/field";<DateField>
<Label>Date</Label>
<DateInput />
</DateField>Use the controls below to experiment with different date field props and see the live preview and code update.
A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
A date input groups the editable date segments within a date field.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Unknown>
<Dynamic(Label)>Date</Dynamic(Label)>
<Dynamic(DateInput) />
</Unknown>