# Date preset select (goodtabs UI)

A pill that opens a menu of date range presets, with an optional custom range.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/date-preset-select.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/date-preset-select`

## Usage

```tsx
import { DatePresetSelect } from "@/components/ui/date-preset-select"

<DatePresetSelect value={range} onValueChange={setRange} onCustom={() => setPickerOpen(true)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` |  | The chosen preset value. "custom" shows Custom range in the trigger. Omit to run uncontrolled. |
| defaultValue | `string` | `"7d"` | First value when uncontrolled. |
| onValueChange | `(value: string) => void` |  | Called with the chosen preset value. |
| presets | `{ value: string; label: string }[]` | `datePresets` | Replaces the five default presets: today, yesterday, 7d, 30d, month. |
| onCustom | `() => void` |  | Adds a Custom range item after a separator and runs when it is chosen. |
| label | `string | null` | `"Date range"` | Heading inside the menu. null hides it. |

## When to use

- Above a chart, table or report to switch the period in one click
- In a toolbar where a full calendar would be too heavy for the common cases
- When five or so named ranges cover almost every need

## When not to use

- When people pick arbitrary dates most of the time; use a calendar picker directly
- For comparing two periods; build a dedicated control
- As a form field that must submit a value; wrap a native select instead

## Notes for agents

- A demo or parent that passes onValueChange or onCustom must be a client component
- Custom range does not change the value; set value to "custom" yourself once your picker has a range and the trigger reads Custom range
- datePresets is exported; spread it to add or rename presets and pass the result as presets
- The trigger is an outline sm Button made a pill; any Button prop such as disabled passes through

Docs: https://ui.goodtabs.co/components/date-preset-select