Data Display
Relative Time
A time element that states a value as relative text such as "3 minutes ago". It builds the text from Intl.RelativeTimeFormat and Temporal, and the live prop refreshes it on a timer.
ReactVueWeb Components
View in Storybook Playground
Examples
<RelativeTime value={Temporal.Now.instant().subtract({ hours: 2 })} live />
<RelativeTime value="2026-01-01" locale="ja" numeric="always" />Props
| Name | Type | Default | Description |
|---|---|---|---|
value required | RelativeTimeValue | — | The point in time to describe. Accepts `Temporal.PlainDate`, `Temporal.PlainDateTime`, `Temporal.ZonedDateTime`, `Temporal.Instant`, or an ISO string. |
base | RelativeTimeValue | — | Reference instant (default: now at render / tick time). Accepts the same union as `value`. |
locale | string | — | BCP-47 locale string (default: system locale). |
numeric | 'auto' | 'always' | auto | `'auto'` emits "yesterday"/"今日" etc.; `'always'` always uses a number. |
live | boolean | false | Re-render on a timer so "3分前" stays fresh. |
updateInterval | number | 30000 | How often to re-render in milliseconds when `live` is true. Clamped to a minimum of 1000 ms (the finest displayed unit is seconds). |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.