# DatePicker

> A labeled date field built on DateField, with a DatePicker.Group row for composing more than one field into a single control.

```ts
import { DatePicker } from "@sdxc/ui";
```

Renders DatePicker's root. Leaving `children` unset renders the field,
passing every prop above through unchanged; composing
DatePicker.Group as `children` instead renders the joined row and
leaves those props unread.

## Examples

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

```tsx
<DatePicker>
	<Label htmlFor="startDate">{t("form.startDate.label")}</Label>
	<DatePicker.Group>
		<Input id="startDate" type="date" name="startDate" />
	</DatePicker.Group>
</DatePicker>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `Color` | Semantic color role for the fallback field's focus ring. Read only when `children` is unset. |
| `label?` | `RemixNode` | The fallback field's caption, rendered through DateField. Read only when `children` is unset. |
| `description?` | `RemixNode` | Supporting copy beneath the fallback field. Read only when `children` is unset. |
| `errorMessage?` | `RemixNode` | Validation message beneath the fallback field. Read only when `children` is unset. |
| `name?` | `string` | Native `name` submitted with an enclosing form, read only by the fallback field. |
| `value?` | `string` | Current value, in `YYYY-MM-DD` form, for a fallback field a consumer tracks itself. |
| `defaultValue?` | `string` | Initial value, in `YYYY-MM-DD` form, for a fallback field left to the platform's own uncontrolled state. |
| `min?` | `string` | Earliest accepted date, in `YYYY-MM-DD` form, read only by the fallback field. |
| `max?` | `string` | Latest accepted date, in `YYYY-MM-DD` form, read only by the fallback field. |
| `step?` | `number` | Granularity, in days, the fallback field's value must fall on. |
| `required?` | `boolean` | Marks the fallback field required for its enclosing form. |
| `disabled?` | `boolean` | Marks the fallback field inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks the fallback field's value fixed, while keeping it focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint for the fallback field, e.g. `"bday"`. |
| `parts?` | `PartsProps` | Per-part styling for the fallback field's internally composed parts. Read only when `children` is unset. |
| `children?` | `RemixNode` | The composed layout — typically a `Label` and a DatePicker.Group — rendered in place of the field, leaving every field above unread. |

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


### DatePicker.Group

Renders DatePicker's control row: a flex host laying one or more date controls side by side and joining their edges, so a pair reads as one field.

Also accepts everything in `TagProps<"div">`.