Time range picker

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Let a monitoring screen pick the span it shows back from now, such as the last 24 hours, how often it refreshes, and when to refresh now. Range and interval are milliseconds, so the screen asks for now − range. Put it in the page header or a toolbar; its selects fit their longest option. Translate timeRangeOptions and refreshIntervalOptions, or pass spans of your own.

• Don't use it for a fixed span between two dates. Put a DateRangePicker beside it.
• Don't refresh faster than the data changes. A 10 second interval on hourly data only costs requests.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

div(role=group, aria-label) → Select(range) + Select(refresh interval)? + Button(refresh now)?

Keyboard and accessibility

The group holds two selects and a button, each in the Tab order with its own name. The interval pauses while the page is hidden and refreshes once when it shows again.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { TimeRangePicker } from '@surflane/ui/time-range-picker'

<TimeRangePicker
  label='Dashboard time'
  range={range}
  onRangeChange={setRange}
  refreshInterval={interval}
  onRefreshIntervalChange={setInterval}
  onRefresh={() => refetch()}
/>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens