# DateRangePicker

> A paired-field date range control built on DateField — independent start-date and end-date fields, each fully labeled, described, and validated on its own — with a DateRangePicker.Group row for joining the two into one control.

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

Renders DateRangePicker's root. Leaving `children` unset renders
two independent DateField instances side by side under a native
`role="group"`, each aligned to its own start edge so a validation message
under one never shifts the other's label; composing
DateRangePicker.Group as `children` instead joins the two fields into
one row and leaves every field prop above unread.

## Examples

```tsx
<DateRangePicker
	startLabel={t("form.stay.checkIn")}
	endLabel={t("form.stay.checkOut")}
	startName="checkIn"
	endName="checkOut"
/>
```

```tsx
<DateRangePicker>
	<Label htmlFor="tripStart">{t("form.trip.label")}</Label>
	<DateRangePicker.Group>
		<Input id="tripStart" type="date" name="tripStart" aria-label={t("form.trip.start")} />
		<Input id="tripEnd" type="date" name="tripEnd" aria-label={t("form.trip.end")} />
	</DateRangePicker.Group>
</DateRangePicker>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `Color` | Semantic color role for the fallback pair's focus rings. Read only when `children` is unset. |
| `startLabel?` | `RemixNode` | The start-date field's caption, rendered through DateField. Read only when `children` is unset. |
| `endLabel?` | `RemixNode` | The end-date field's caption, rendered through DateField. Read only when `children` is unset. |
| `startDescription?` | `RemixNode` | Supporting copy beneath the start-date field. Read only when `children` is unset. |
| `endDescription?` | `RemixNode` | Supporting copy beneath the end-date field. Read only when `children` is unset. |
| `startErrorMessage?` | `RemixNode` | Validation message beneath the start-date field. Read only when `children` is unset. |
| `endErrorMessage?` | `RemixNode` | Validation message beneath the end-date field. Read only when `children` is unset. |
| `startName?` | `string` | Native `name` submitted with an enclosing form for the start-date field. |
| `endName?` | `string` | Native `name` submitted with an enclosing form for the end-date field. |
| `startValue?` | `string` | Current start-of-range value, in `YYYY-MM-DD` form, for a fallback pair a consumer tracks itself. |
| `endValue?` | `string` | Current end-of-range value, in `YYYY-MM-DD` form, for a fallback pair a consumer tracks itself. |
| `startDefaultValue?` | `string` | Initial start-of-range value, in `YYYY-MM-DD` form, for a fallback pair left to the platform's own uncontrolled state. |
| `endDefaultValue?` | `string` | Initial end-of-range value, in `YYYY-MM-DD` form, for a fallback pair left to the platform's own uncontrolled state. |
| `min?` | `string` | Earliest accepted date, in `YYYY-MM-DD` form, read by both of the fallback pair's fields. |
| `max?` | `string` | Latest accepted date, in `YYYY-MM-DD` form, read by both of the fallback pair's fields. |
| `step?` | `number` | Granularity, in days, both of the fallback pair's values must fall on. |
| `required?` | `boolean` | Marks both of the fallback pair's fields required for their enclosing form. |
| `disabled?` | `boolean` | Marks both of the fallback pair's fields inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks both of the fallback pair's fields' values fixed, while keeping them focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint for both of the fallback pair's fields. |
| `parts?` | `PartsProps` | Per-part styling for the fallback pair's internally composed DateField instances. Read only when `children` is unset. |
| `children?` | `RemixNode` | The joined layout — typically a `Label` and a DateRangePicker.Group — rendered in place of the paired fields, leaving every field above unread when set. |

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