A date-range chip for filter rows: presets plus a two-month range calendar.
DateRangeFilter is the date filter in a FilterBar. It reads as a chip like Select's, with presets (last 7 days, this month) and a range calendar.
Installation
npx shadcn@latest add KezLahd/rime/date-range-filterAlso installs: base, button, date-field, field, icon.
Usage
import { DateRangeFilter } from "@/components/ui";
<DateRangeFilter aria-label="Issued" value={range} onChange={setRange} />Examples
Open
Chip
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
DateRangeFilter
| Prop | Type | Default | Description |
|---|---|---|---|
| valueRequired | DateRange | Both null = no filter. A half-picked range never reaches onChange. | |
| onChangeRequired | (value: DateRange) => void | ||
| presets | ReadonlyArray<DateRangePreset> | DEFAULT_DATE_RANGE_PRESETS | |
| min | IsoDate | ||
| max | IsoDate | ||
| isDateDisabled | (date: IsoDate) => boolean | ||
| placeholder | string | "All dates" | Shown when no range is set. |
| appearance | "chip" | "field" | "chip" | chip = 32px filter-bar chip. field = form-control height, beside Select. |
| months | 1 | 2 | Calendars side by side. Defaults to 2, or 1 under 640px. | |
| disabled | boolean | ||
| invalid | boolean | ||
| id | string | ||
| aria-label | string | Names the control. The current range is appended, so it is read too. | |
| className | string | ||
| inline | boolean | false | Show the panel open, in place under the trigger: no portal, no focus move, no outside-click listener. For docs and thumbnails. |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --chip-height | var(--control-h-sm) | … |
| --chip-radius | var(--r-sm) | … |
| --field-focus-border | rgba(var(--rgb-brand), 0.7) | … |
| --field-focus-ring | var(--focus-halo) | … |
| --field-focus-ring-invalid | 0 0 0 4px rgba(var(--rgb-danger), 0.14) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-deep | tokens.css | … |
| --chip-active-fill | tokens.css | … |
| --chip-active-fill-hover | tokens.css | … |
| --chip-active-shadow | tokens.css | … |
| --control-h-sm | tokens.css | … |
| --danger-base | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-fast | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-color | tokens.css | … |
| --focus-gap | tokens.css | … |
| --focus-halo | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-body | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line | tokens.css | … |
| --line-brand | tokens.css | … |
| --line-soft | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-lg | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --recess-fill | tokens.css | … |
| --recess-fill-hover | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-menu | tokens.css | … |
| --shadow-recess | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-input | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-row | tokens.css | … |
| --wash-strong | tokens.css | … |
| --wash-subtle | tokens.css | … |
| --z-popover | tokens.css | … |
Accessibility
- The clear button is a separate control, so the trigger never nests a button.
Do and don't
Do
- Put it after the Select chips in a FilterBar.
Don't
- Don't use it for a single date; that is DateField.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open date-range-filter.md