DateField

Labelled date-picker field — wraps the DatePicker primitive with a label above and optional help text

Interactive-mode

Examples

Date of birth

Contract start date*

Start date is required.

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
DateField	A labelled date-picker field chunk. Renders a `FormLabel` above a `DatePicker` popover button. Wraps the `DatePicker` primitive.

A labelled date-picker field chunk. Renders a FormLabel above a DatePicker popover button. Wraps the DatePicker primitive.

Property	Type	Description
Label	string?	Label text rendered above the date picker via `FormLabel`. Omit to hide the label.
HelpText	string?	Helper text rendered below the picker. Shown in `text-danger-fg` when `Error` is true, otherwise `text-muted-foreground`.
Error	bool	Applies error styling to the label and help text. Default: `false`.
Required	bool	Appends a red asterisk to the label via `FormLabel`. Default: `false`.
Disabled	bool	Disables the underlying date picker. Default: `false`.
MinDate	DateTime?	Earliest selectable date. Passed through to the inner `DatePicker`.
MaxDate	DateTime?	Latest selectable date. Passed through to the inner `DatePicker`.
Id	string	HTML `id` — auto-generated by default.
Value	DateTime?	Currently selected date. Use `@bind-Value` for two-way binding.
ValueChanged	EventCallback<DateTime?>	Fires when the selected date changes. Part of the `@bind-Value` pair.