EEnterUI
DocsComponentsThemesDonation
Get Started
    • CronInput
    • RecurrenceEditor
    • AgendaList
EnterUIDocsSchedulingScheduling RulesCronInput
SchedulingUpdated 6 May 2026

CronInput

Compact cron expression input with common scheduling presets.

CronInput covers simple automation scheduling without shipping a cron parser. It pairs presets with an editable expression for advanced users.

#Default usage

Cron schedule

Choose a common preset or edit the cron expression directly.

Weekly

Code
<CronInput defaultValue="0 9 * * 1" />

#Import

Code
import { CronInput } from "@froggdesign/enter-ui-react";

#Controlled

Code
<CronInput
  value={cron}
  onValueChange={setCron}
/>

#Patterns

Use CronInput for automation settings, report delivery, sync jobs, scheduled exports, and workflow triggers.

#Accessibility

The preset select and expression input are separately labelled. Keep server-side validation near the scheduling boundary because CronInput intentionally avoids a large parser.

#API

  • value, defaultValue: cron expression.
  • onValueChange: called with the next expression.
  • presets: optional { id, label, expression }[].

#Styling

CronInput uses .eui-cron-input classes and FroggDesign tokens for layout, state, focus, and disabled styling.

PreviousDateTimePicker
NextRecurrenceEditor

On this page

  1. Default usage
  2. Import
  3. Controlled
  4. Patterns
  5. Accessibility
  6. API
  7. Styling