<DateField aria-label="Meeting date">
<DateInput />
</DateField>npx 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.
<DateField>
<Label>Date</Label>
<DateInput />
</DateField>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 | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
((date: DateValue) => boolean) | — | ||
T | null | — | ||
12 | 24 | — | ||
Granularity | — | ||
boolean | false | ||
boolean | — | ||
ReactNode | function | — | ||
T | null | — | ||
T | null | — | ||
function | — | ||
A date input groups the editable date segments within a date field.
| Prop | Type | Default | |
|---|---|---|---|
"sm" | "md" | "lg" | 'md' | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.