# RangePicker

> The time range for a dashboard, kept in the URL: preset ranges as a segmented control of GET-form buttons with letter-key hints, a Custom entry that opens a date range in a popover, and a native select in its place when the container is narrow.

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

Renders the picker. Each preset is a submit button of a GET form, pressed when it is the
range in effect; under a 24rem container the segments give way to a select with an Apply
button. Attach `rangePickerKeys()` for letter keys and to submit the select on change.

## Examples

```tsx
<RangePicker
	value={range}
	params={{ monitor: monitorId }}
	presets={[
		{ value: "24h", label: "24h", description: t("range.day"), key: "d" },
		{ value: "7d", label: "7d", description: t("range.week"), key: "w" },
	]}
	custom={{ startName: "from", endName: "to", start: from, end: to, key: "c" }}
	labels={{ group: t("range.label"), apply: t("range.apply"), custom: t("range.custom"), start: t("range.from"), end: t("range.to") }}
	mix={rangePickerKeys()}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `presets` | `readonly Preset[]` |  |
| `value?` | `string` | The range in effect: a preset's `value`, or RANGE_PICKER_CUSTOM_VALUE. |
| `name?` | `string` |  |
| `action?` | `string` | Where the forms submit; the current URL when omitted. |
| `params?` | `Readonly<Record<string, string>>` | Other query parameters to keep, submitted as hidden fields (filters, the open tab). |
| `custom?` | `Custom` |  |
| `labels` | `Labels` |  |
| `keyHints?` | `boolean` | Shows each preset's key as a hint inside its segment. |

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