Trouble with RadzenFormField and layout

I really like the look of the RadzenFormField component and I'd like to use them in my app.

Unfortunately, I can't seem to determine why the text of the form field displays to the right side of my textbox:


I named the FormField "StreetFF" for troubleshooting. Is it possible some of my layout/formatting is causing an issue? I'm using pages originally generated by Radzen Blazor Studio and I'd like to keep my layout compatible with Radzen in case I want to change themes later.

                    <RadzenTabsItem Text="Property">
                    <RadzenFieldset Text="Address Details">
                        <RadzenRow style="margin-bottom: 1rem">
                            <RadzenColumn SizeMD="12">
                            <RadzenFormField Text="StreetFF">
                                <RadzenTextBox @bind-Value="@newOpportunity.Street" Name="Street" />
                                <RadzenRequiredValidator Component="Street" Text="Street is required" />

Hi @DB1234,

I could not reproduce the issue in the online demos:


The misalignment is most probably a result of some custom styling. You can use DevTools to inspect the element and see what is causing it.

On a side note, noticed that you have RadzenColumn placed directly inside RadzenTabsItem. You should always place RadzenColumn inside RadzenRow.

<RadzenTabsItem Text="Property">
    <RadzenRow> <-- This is missing

Your application could also be using an older version of Radzen.Blazor which doesn't include RadzenFormField.

Thanks for the reply, I'm using v4.10.2 (latest is 4.10.3?).

The docs don't list the minimum version for FormField.

Thanks, I'll move the Column into a Row.

Is there some documentation that would help me make sure I'm following any other rules like this?

I found it here:

@yordanov is their plans to update dropdowns to also include this feature at some point?

@kest874 if your ask is about a dropdown with a floating label, it is available already. All you have to do is to place <RadzenDropDown> inside a <RadzenFormField>. See the input types example on the form field demo page.

<RadzenFormField Text="RadzenDropDown">
    <RadzenDropDown ... />


Hello radzen team,
im going to use RadzenFormField with radzen 2.84.8 & Radzen.Blazor 4.10.4 but i cant get it to work.
Radzen generates no "RadzenRow" or "RadzenColumn". Only "div" with classes.

@using Trent.Models.Trentdb
@using Microsoft.AspNetCore.Identity;
@using Trent.Models
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles="Authenticated, Developer")]
@inject Microsoft.Extensions.Localization.IStringLocalizer<Test> L
<RadzenContent Container="main">
    <RadzenHeading Size="H1" Text="Test">
    <div class="row">
      <div class="col-md-3">
        <RadzenFormField Text="PLZ" Variant="Variant.Outlined">
            <RadzenTextBox Placeholder="Ort" style="width: 100%" Name="Textbox0">

And i only can insert a RadzenTextbox via Template.
So the code looks like above.

Did i miss something? How can i get this to work?


Only Radzen Blazor Studio generates RadzenRow and RadzenColumn.

That means that i can not use RadzenFormfield from Radzen Studio?
or only with RadzenHtml?

You can use RadzenFormField by dragging and dropping it from the toolbox.