DateField

A convenience wrapper composing a labeled, described, and validated date field in one call.

Transaction date

Today — this claim posts in the current period.

View code

let today = new Date();
let { min, max } = quarterBounds(today);
let value = dayKey(today);

function pickDate(event: Event & { currentTarget: HTMLInputElement }) {
	value = event.currentTarget.value;
	void handle.update();
}

<DateField
	label="Transaction date"
	name="transactionDate"
	description={relativeDayHint(parseDayValue(value), today)}
	value={value}
	min={min}
	max={max}
	required
	autoComplete="off"
	parts={{ input: [on<HTMLInputElement, "change">("change", pickDate)] }}
/>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { DateField } from "@sdxc/ui";

Renders a complete date field in one call, stacking Label, Input, and, when supplied, Description and FieldError. An invalid state — from errorMessage or an explicit aria-invalid override — recolors the border and ring to the semantic danger tone regardless of color.

Examples

<DateField
	label={t("form.startDate.label")}
	name="startDate"
	min="2026-01-01"
	max="2026-12-31"
	description={t("form.startDate.hint")}
/>

<DateField
	label={t("form.dueDate.label")}
	name="dueDate"
	defaultValue="2026-07-20"
	errorMessage={t("form.dueDate.pastDate")}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted.
`label`	`RemixNode`	The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier.
`description?`	`RemixNode`	Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`. Omit to render no description.
`errorMessage?`	`RemixNode`	Validation message rendered through FieldError beneath the control; its presence alone marks `aria-invalid` unless set explicitly. Inside a Form carrying `issues`, an explicit value still wins over the field's own by-`name` lookup.
`autoFocus?`	`boolean`	Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, landing keyboard focus on the problem after a server round-trip; pass it explicitly to override for this field.
`name?`	`string`	Native `name` submitted with an enclosing form.
`value?`	`string`	Current value, in `YYYY-MM-DD` form, for a control a consumer tracks itself.
`defaultValue?`	`string`	Initial value, in `YYYY-MM-DD` form, for a control left to the platform's own uncontrolled state.
`min?`	`string`	Earliest accepted date, in `YYYY-MM-DD` form.
`max?`	`string`	Latest accepted date, in `YYYY-MM-DD` form.
`step?`	`number`	Granularity, in days, the control's value must fall on.
`required?`	`boolean`	Marks the control required for its enclosing form.
`disabled?`	`boolean`	Marks the control inert and excluded from the tab order.
`readOnly?`	`boolean`	Marks the control's value fixed, while keeping it focusable and included in form submission.
`autoComplete?`	`string`	Native autofill hint, e.g. `"bday"`.
`parts?`	`PartsProps`	Per-part styling for this wrapper's internally composed elements.

Also accepts everything in Omit<TagProps<"div">, "children">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables.