# DateField

> A convenience wrapper composing a labeled, described, and validated date field in one call: a caption through Label, a native `<input type="date">` styled through Input, an optional supporting passage through Description, and an optional validation message through FieldError.

```ts
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

```tsx
<DateField label={t("form.birthday.label")} name="birthday" autoComplete="bday" />
```

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

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

## Props

| 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. |