Support floating label for RadzenDatePicker #1582

New Issue

claunia · 2026-01-29T17:55:41Z

claunia commented

2026-01-29 17:55:41 +00:00

Originally created by @rklfss on GitHub (Jan 30, 2025).

Is your feature request related to a problem? Please describe.

It seems like RadzenDatePicker is currently not intented to be used inside a RadzenFormField I could not find any examples for this in the docs. Thus the floating label is not working if you use it like this anyway.

It would be great if RadzenDatePicker would have full support for use inside RadzenFormField because date fields are an essential part for a lot of forms and should behave consistently.

From my inspection it is basically 3 things that prevent this from working currently.

rz-state-empty css class is not set for empty date picker values
Focused RadzenLabel styles are only considered for intented form fields (RadzenTextBox, RadzenTextArea etc.)
Inline variant of the date picker will obviously not work in this concept

Describe the solution you'd like

Thoughts about addressing those three issues:

This could be a simple one. Add the rz-state-empty css class based on the HasValue property.
As RadzenFormField has a special rz-state-focused css class set when focused, the focused label styles could be defined based on this.
716d1a6cba/Radzen.Blazor/themes/components/blazor/_form-field.scss (L346-L388)
Maybe add .rz-form-field.rz-state-focused .rz-form-field-label respectively .rz-form-field:not(.rz-variant-outlined).rz-state-focused .rz-form-field-label to the selectors?

This could possibly also enable us to create custom form field components that behave as expected.
This could be the toughest one. Only solution that comes to my mind is to separate the components. Do a RadzenCalenderPicker or something like that as the inline variant. Make use of it in the date picker field popup....

Describe alternatives you've considered

Fixed variant by a wrapping component that adds the rz-state-empty css class and adds the focused label styles. (Tough one as you have to pass a lot of parameters through the wrapper, at least the ones that are used).
Live with the always floating label for now ;)

Additional context

See it in action.

Originally created by @rklfss on GitHub (Jan 30, 2025). **Is your feature request related to a problem? Please describe.** It seems like RadzenDatePicker is currently not intented to be used inside a RadzenFormField I could not find any examples for this in the docs. Thus the floating label is not working if you use it like this anyway. It would be great if RadzenDatePicker would have full support for use inside RadzenFormField because date fields are an essential part for a lot of forms and should behave consistently. From my inspection it is basically 3 things that prevent this from working currently. 1. `rz-state-empty` css class is not set for empty date picker values 2. Focused RadzenLabel styles are only considered for intented form fields (RadzenTextBox, RadzenTextArea etc.) 3. Inline variant of the date picker will obviously not work in this concept **Describe the solution you'd like** Thoughts about addressing those three issues: 1. This could be a simple one. Add the `rz-state-empty` css class based on the `HasValue` property. 2. As RadzenFormField has a special `rz-state-focused` css class set when focused, the focused label styles could be defined based on this. https://github.com/radzenhq/radzen-blazor/blob/716d1a6cba131b2bab82b0612cac9a1e39a652a6/Radzen.Blazor/themes/components/blazor/_form-field.scss#L346-L388 Maybe add `.rz-form-field.rz-state-focused .rz-form-field-label` respectively `.rz-form-field:not(.rz-variant-outlined).rz-state-focused .rz-form-field-label` to the selectors? This could possibly also enable us to create custom form field components that behave as expected. 3. This could be the toughest one. Only solution that comes to my mind is to separate the components. Do a RadzenCalenderPicker or something like that as the inline variant. Make use of it in the date picker field popup.... **Describe alternatives you've considered** - Fixed variant by a wrapping component that adds the `rz-state-empty` css class and adds the focused label styles. (Tough one as you have to pass a lot of parameters through the wrapper, at least the ones that are used). - Live with the always floating label for now ;) **Additional context** See it in action. ![Image](https://github.com/user-attachments/assets/8a159bbf-82b6-4e60-9d1f-5c2c3ab7abdd)

claunia closed this issue

2026-01-29 17:55:41 +00:00

claunia commented

2026-01-29 17:55:42 +00:00

@enchev commented on GitHub (Jan 30, 2025):

Thanks @rklfss! We accept pull requests!

@enchev commented on GitHub (Jan 30, 2025): Thanks @rklfss! We accept pull requests!

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1582