Class RadzenFormField

A form field container component that wraps input components with labels, icons, helper text, and validation messages. RadzenFormField provides a Material Design-style field layout with floating labels and consistent spacing. Enhances form inputs by adding structure, labels, and supplementary content in a cohesive layout. Features top-aligned or floating labels via Text property, Start/End content for icons or buttons before/after the input (e.g., search icon, clear button), helper text for explanatory text or validation messages below the input, Filled/Outlined/Flat variants matching Material Design, floating labels that animate upward when input is focused or has value, and automatic display of validation messages when used with validators. Compatible with RadzenTextBox, RadzenTextArea, RadzenPassword, RadzenDropDown, RadzenNumeric, RadzenDatePicker, and similar input components. Use Start for leading icons (search, email), End for trailing icons (visibility toggle, clear button).

Inheritance

object

ComponentBase

RadzenComponent

RadzenFormField

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenFormField : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic form field with label:

<RadzenFormField Text="Email Address">
    <RadzenTextBox @bind-Value=@email />
</RadzenFormField>

Form field with icon and validation:

<RadzenTemplateForm Data=@model>
    <RadzenFormField Text="Search" Variant="Variant.Outlined">
        <Start><RadzenIcon Icon="search" /></Start>
        <ChildContent>
            <RadzenTextBox Name="SearchTerm" @bind-Value=@model.SearchTerm />
        </ChildContent>
        <Helper>
            <RadzenRequiredValidator Component="SearchTerm" Text="Search term is required" />
        </Helper>
    </RadzenFormField>
</RadzenTemplateForm>

Floating label form field:

<RadzenFormField Text="Username" AllowFloatingLabel="true" Variant="Variant.Filled">
    <RadzenTextBox />
</RadzenFormField>

Constructors

RadzenFormField()

Initializes a new instance of the RadzenFormField class.

Declaration

public RadzenFormField()

Properties

AllowFloatingLabel

Gets or sets a value indicating whether the label is floating or fixed on top.

Declaration

[Parameter]
public bool AllowFloatingLabel { get; set; }

Property Value

Type	Description
bool	true if floating is allowed; otherwise, false.

ChildContent

Gets or sets the input component to wrap. Place the input component (RadzenTextBox, RadzenDropDown, etc.) here. The form field automatically integrates with the input for labels and validation.

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	The input component render fragment.

Component

Gets or sets the name of the form field. Used to associate the label with a component.

Declaration

[Parameter]
public string Component { get; set; }

Property Value

Type	Description
string

End

Gets or sets content to render after (trailing position of) the input field. Typically used for icons like visibility toggle, clear button, or suffix text like units. Appears inside the form field border, after the input element.

Declaration

[Parameter]
public RenderFragment End { get; set; }

Property Value

Type	Description
RenderFragment	The end content render fragment.

Helper

Gets or sets content to render below the input field. Used for helper text, hints, character counters, or validation messages. Validators placed here are automatically displayed when validation fails.

Declaration

[Parameter]
public RenderFragment Helper { get; set; }

Property Value

Type	Description
RenderFragment	The helper content render fragment.

Start

Gets or sets content to render before (leading position of) the input field. Typically used for icons like search, email, lock, or prefix text like currency symbols. Appears inside the form field border, before the input element.

Declaration

[Parameter]
public RenderFragment Start { get; set; }

Property Value

Type	Description
RenderFragment	The start content render fragment.

Text

Gets or sets the label text.

Declaration

[Parameter]
public string Text { get; set; }

Property Value

Type	Description
string

TextTemplate

Gets or sets the custom content for the label using a Razor template. When provided, this template will be rendered instead of the plain text specified in the Text parameter.

Declaration

[Parameter]
public RenderFragment TextTemplate { get; set; }

Property Value

Type	Description
RenderFragment

Variant

Gets or sets the design variant of the form field.

Declaration

[Parameter]
public Variant Variant { get; set; }

Property Value

Type	Description
Variant	The variant of the form field.

Methods

BuildRenderTree(RenderTreeBuilder)

A form field container component that wraps input components with labels, icons, helper text, and validation messages. RadzenFormField provides a Material Design-style field layout with floating labels and consistent spacing. Enhances form inputs by adding structure, labels, and supplementary content in a cohesive layout. Features top-aligned or floating labels via Text property, Start/End content for icons or buttons before/after the input (e.g., search icon, clear button), helper text for explanatory text or validation messages below the input, Filled/Outlined/Flat variants matching Material Design, floating labels that animate upward when input is focused or has value, and automatic display of validation messages when used with validators. Compatible with RadzenTextBox, RadzenTextArea, RadzenPassword, RadzenDropDown, RadzenNumeric, RadzenDatePicker, and similar input components. Use Start for leading icons (search, email), End for trailing icons (visibility toggle, clear button).

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

OnParametersSet()

A form field container component that wraps input components with labels, icons, helper text, and validation messages. RadzenFormField provides a Material Design-style field layout with floating labels and consistent spacing. Enhances form inputs by adding structure, labels, and supplementary content in a cohesive layout. Features top-aligned or floating labels via Text property, Start/End content for icons or buttons before/after the input (e.g., search icon, clear button), helper text for explanatory text or validation messages below the input, Filled/Outlined/Flat variants matching Material Design, floating labels that animate upward when input is focused or has value, and automatic display of validation messages when used with validators. Compatible with RadzenTextBox, RadzenTextArea, RadzenPassword, RadzenDropDown, RadzenNumeric, RadzenDatePicker, and similar input components. Use Start for leading icons (search, email), End for trailing icons (visibility toggle, clear button).

Declaration

protected override void OnParametersSet()

Overrides

ComponentBase.OnParametersSet()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable