Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Date field with an Opus-styled calendar popover (type="date"). The control shows a locale-formatted value and opens a compact month grid with Clear and Today actions — not the browser-native date dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | ISO date (yyyy-mm-dd). |
onChange | (event) => void | — | Change handler; event.target.value is the ISO date (or empty when cleared). |
min | string | — | Earliest selectable ISO date. |
max | string | — | Latest selectable ISO date. |
mode | "stacked" | "flagged" | "stacked" | Layout mode for label and control. |
labelPosition | "left" | "right" | "left" | Label placement in flagged mode. |
error | string | — | Validation message; sets aria-invalid when present. |
help | string | — | Supplementary help text linked via aria-describedby. |
required | boolean | false | Marks the field as required for assistive tech. |
FieldShell for label, help, error, and required wiring.htmlFor / id.