Range selector · Components

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

For the time window over a chart. Use SegmentedControl instead when the options switch content rather than a period.

<RangeSelector options value onChange />

Already in every copy of the native kit:

import { RangeSelector } from '@/components/kit/range-selector';

Exports: RangeSelector
Source: apps/mobile/components/kit/range-selector.tsx
Installs with: @kit-native/lib-haptics, @kit-native/lib-utils, @kit-native/text
Also searched as: time range, chart range, 1D 1W 1M, period
Registry JSON: /r/native/range-selector.json

The web kit's real component, live. Follows this site's theme.

For the time window over a chart. Use SegmentedControl when the options switch content rather than a period.

<RangeSelector options value onChange aria-label />

Already in every copy of the web kit:

import { RangeSelector } from '@/components/kit/range-selector';

Agents: the whole registry is at /llms.txt.