Recurrence editor

A React component in Beamline's Form controls category.

How something repeats, set in plain controls and said back in a sentence: every N days, weeks, months or years; which weekdays; in a month, on a date or on the second Tuesday (or the last Friday); ending never, on a date or after a number of times. The next dates are listed so the rule can be checked against a calendar, months without the chosen date are said, and the rule comes out as a value and an iCalendar RRULE.

Use it for

Repeating events, reminders, reports, invoices, payouts or maintenance windows: the person sets how often and until when.
Anywhere an RRULE (RFC 5545) is stored and has to be readable by people.

Not for

One date or time (date-picker, time-picker).
Opening hours or when someone can be booked (availability-rule-editor).
A range of dates (date-range-picker).

Anatomy

summary: the rule in one sentence ('Every 2 weeks on Monday and Thursday, until 31 Dec 2026') that wraps in a narrow room and fades to its next wording as the rule changes
frequency: Daily, Weekly, Monthly, Yearly
interval: 'Every [n] weeks' (the unit follows the frequency and its count)
weekly: the seven weekdays as toggles, the start's weekday on by default; at least one stays on
monthly: on day 15, or on the second Tuesday (first, second, third, fourth, last), both read from the start date
ends: never, on a date, or after n times
a note when a monthly date does not exist in every month (the 31st): those months are skipped
next dates: the next five, from the start

Variants

frequencies: daily, weekly, monthly, yearly

States

daily
weekly
monthly by date
monthly by weekday
yearly
ends never
ends on a date
ends after n
skipped months
an end before the start (said, no dates listed)
disabled

Keyboard

Each control is the system's own: the segmented frequency and the weekday toggles move with ← →, the number fields step with ↑ ↓, the radio groups with the arrow keys
The summary is a live line for assistive tech: the sentence is read after a change settles

Motion

Controls that belong to one frequency grow in and out as it changes (the panel eases to its height); the summary fades to its next sentence (a sentence wraps, so it is not morphed letter by letter); the next dates keep their path: dates that remain slide to their new place, new ones arrive, old ones leave. Reduced motion: changes are instant.

Props

Prop	Type	Default	Description
`start` (required)	`Date`	—	The first time it happens; the defaults (weekday, day of month) are read from it.
`value / defaultValue / onValueChange`	`Recurrence`	—
`preview`	`number`	—	How many next dates to list. Default 5; 0 hides the list.
`frequencies`	`RecurrenceFrequency[]`	—	Which to offer. Default all four.
`weekStartsOn`	`0 \| 1`	—	Order of the weekday toggles. Default 1 (Monday).
`locale`	`string`	—	Dates in the summary and the list. Default en-US.
`disabled`	`boolean`	—
`className / classNames / style / ref`	`root`	—

Built from

Dependencies

@radix-ui/react-toggle-group, @radix-ui/react-radio-group

Import

import { RecurrenceEditor } from "@/components/recurrence-editor/recurrence-editor";

Get it

Recurrence editor is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent