Skip to content

Conversation

@danicaleroo
Copy link
Contributor

What / Why

Date & Time fields were rendering their field label as a <span> while every other field type uses a proper <label> with a matching htmlFor.

Because the element was a span it broke styles and made 'field-label' have different styles from the rest of 'field-label's.

Root cause: DateTimeField failed to pass its path (or an explicit htmlFor) to FieldLabel. When FieldLabel receives no htmlFor, it intentionally downgrades to a <span>.

Screenshots

Before

image
DateTime label rendered as <span>, causing style inconsistencies

After

image
DateTime label now rendered as proper <label> element

Changes introduced

  • packages/ui/src/fields/DateTime/index.tsx
    • Added path={path} prop to FieldLabel component

Behavior after the fix

  • Date-time labels are now real <label> elements with for="field-…"
  • Visual alignment now matches every other field type

How to test manually

  1. Run pnpm dev fields
  2. Inspect the DateTime field markup – label is now <label>
  3. Observe that vertical spacing matches other types of fields
@paulpopus paulpopus enabled auto-merge (squash) June 26, 2025 17:38
@DanRibbens DanRibbens disabled auto-merge June 27, 2025 09:34
@DanRibbens DanRibbens merged commit 4b9566f into payloadcms:main Jun 27, 2025
155 of 157 checks passed
@github-actions
Copy link
Contributor

🚀 This is included in version v3.44.0

@danicaleroo danicaleroo deleted the fix/datetime-label-htmlfor branch July 8, 2025 11:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants