Cron Editor
A schedule as a cron expression, with a plain-language reading and the next runs.
- Forms
- 2 files
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add cron-editorNo npm packages are needed beyond what Dowel already requires.
import { Cron } from "@/components/ui/cron-editor";Default
Round Trip
Expression Only
Either Day Matches
Never Runs
In Three Zones
<Cron>
| Prop | Type | Default |
|---|---|---|
children (required) | ReactNode | — |
defaultValue | string | "0 9 * * 1" |
locale | string | — |
nowThe instant next runs are counted from. Pass one that changes when you refresh. | Date | — |
onValueChange | (expression: string) => void | — |
timeZoneIANA zone the expression's times are in. Defaults to the runtime zone. | string | — |
valueThe expression. Controlled. | string | — |
Plus every attribute of <div> except defaultValue, onChange, children.
<CronBuilder>
Plus every attribute of <div> except children.
<CronExpression>
Plus every attribute of <div> except children.
<CronNextRuns>
| Prop | Type | Default |
|---|---|---|
count | number | 5 |
Plus every attribute of <div> except children.
The expression field is described by one element that holds either the plain-language reading or the reason the expression is invalid, so a reader hears the error replace the reading rather than both at once; an invalid expression is never applied. The builder's day buttons are a named group of aria-pressed toggles with the full day name as the accessible name, and the last selected day cannot be removed silently — the group says why. Days 29 to 31 say in text that shorter months skip them. Next runs are a list of time elements with machine-readable datetimes, headed by the zone they are in, because a time with no zone is the classic scheduling mistake. Nothing clock-dependent renders until the clock is known, so server and client cannot disagree.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes