Cron field
A cron expression field with presets, a plain-English description and the next runs.
<mm-cron-field name="schedule" label="Schedule" value="0 2 * * *"></mm-cron-field>
Guidance
Cron fields set a schedule, as on the pipeline schedule step. Pick a preset (Hourly, Daily at 02:00, Weekly on Monday) or choose Custom and type a five-field expression in mono. The helper line says what the expression means in words ("Every day at 02:00 UTC"), syntax errors say exactly what to fix, and the next five run times are listed in UTC so there is no doubt about when a pipeline will run.
The presets are a radio group (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): arrow keys move and select, Home and End jump to the ends, and Enter or Space on Custom moves focus to the expression. In the expression, Enter commits the value.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The cron expression, five fields or a macro such as @daily. |
placeholder | placeholder | string | '0 2 * * *' | |
hidePresets | hide-presets | boolean | false | Hides the preset radio group. |
runCount | run-count | number | 5 | Number of upcoming runs listed. |
now | now | string | number | Date | undefined | Reference time for upcoming runs (ISO string, Date or epoch ms). Defaults to the current time. | |
description | string | The expression in words, or '' when it is invalid. | ||
label | label | string | '' | Field label. Rendered above the control unless hide-label, and always the accessible name. |
help | help | string | '' | Help text under the control. |
error | error | string | '' | Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid. |
hideLabel | hide-label | boolean | false | Hides the label visually; it stays the accessible name. |
optional | optional | boolean | false | Marks the field as optional, in words. |
name | name | string | '' | Name submitted with the form. |
disabled | disabled | boolean | false | Disables the control and excludes it from submission. |
required | required | boolean | false | Requires a value before the form submits. |
form | HTMLFormElement | null | |||
validity | ValidityState | |||
validationMessage | string | |||
willValidate | boolean | |||
isDisabled | boolean | True when disabled directly or by a disabled ancestor fieldset. |
Methods
| Method | Description |
|---|---|
formResetCallback() | Restore the initial value when the owning form resets. |
Events
| Event | Detail | Description |
|---|---|---|
mm-input | CustomEvent<{ value: string }> | On every keystroke in the expression. |
mm-change | CustomEvent<CronChangeDetail> | When the value is committed: a preset is chosen, Enter is pressed or the field loses focus after an edit. |
change | Event | Native change event, re-dispatched from the host on commit. |
input | InputEvent |
CSS parts
| Part | Description |
|---|---|
presets | The preset radio group. |
control | The bordered input wrapper. |
input | The native text input. |
description | The description line. |
runs | The list of upcoming runs. |
Examples
Every state of mm-cron-field in Storybook, with keyboard and screen reader tests.