Magoo Component UI logo Magoo Component UI
← Catalog

Schedule Timer

schedule-timer molecule experimental

A device automation tile showing on/off times, a weekday strip, and an enable switch.

Also in: Cards

The width preview needs a screen wider than the chosen width — use a larger device (or a desktop browser) to see the desktop and tablet layouts.

Default
Porch light
Turns on 18:30
Turns off 23:00
MTWTFSS
WeekendOff
Sprinklers
Turns on 06:00
Turns off 06:20
MTWTFSS

Props

NameTypeReq
device string
on_time string
off_time string
days array
enabled boolean

Related components

How to use

Layout is static and renders with no JavaScript, so the times, weekday dots and switch position reflect the props at render time. Because the directive language can't test membership, pass days as a per-day { label, active } list rather than a set of active names. behavior.js wires the switch: clicking it flips data-state on the button and knob (and aria-checked) and dispatches a bubbling "timer:toggle" event with the new enabled state. The portable self-init reads state from the DOM.

Use cases

cardcontrol WCAG AA SEO 20 dir: both ai-generated