Connor Adams · Design System

finance

PeriodSelector

Interactive

Import

import { PeriodSelector } from '@connor-adams/designsystem'

Usage

The date-range control every ledger view needs — preset periods with an optional custom range, in a compact popover.

const [period, setPeriod] = React.useState('this-month')
const [range, setRange] = React.useState({})
<PeriodSelector value={period} onValueChange={setPeriod} custom={range} onCustomChange={setRange} />

Presets: this month, last 30 days, this quarter, year to date, this year, custom. Override with presets. Selecting "Custom range" reveals from/to date inputs. size="sm|default".

Props

PropTypeDefaultDescription
valuestring | undefinedthis-month
onValueChange((value: string) => void) | undefined—
custom{ from?: string | undefined; to?: string | undefined; } | undefined—
onCustomChange((range: { from?: string | undefined; to?: string | undefined; }) => void) | undefined—
presetsPeriodPreset[] | undefined[ { value: 'this-month', label: 'This month' }, { value: 'last-30', label: 'Last 30 days' }, { value: 'this-quarter', label: 'This quarter' }, { value: 'ytd', label: 'Year to date' }, { value: 'this-year', label: 'This year' }, { value: 'custom', label: 'Custom range' }, ]
size"sm" | "default" | undefineddefault