www.radzen.com
 

RadzenFormField Class

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

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenFormField : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

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

RadzenFormFieldlink

Initializes a new instance of the RadzenFormField class.

Declaration
public RadzenFormField()

Properties

AllowFloatingLabellink

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

Declaration
public bool AllowFloatingLabel { get; set; }
Property Value
Type Description
boolGets or sets a value indicating whether the label is floating or fixed on top.

ChildContentlink

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
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
RenderFragmentGets 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.

Componentlink

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

Declaration
public string Component { get; set; }
Property Value
Type Description
stringGets or sets the name of the form field. Used to associate the label with a component.

Endlink

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
public RenderFragment End { get; set; }
Property Value
Type Description
RenderFragmentGets 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.

Helperlink

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
public RenderFragment Helper { get; set; }
Property Value
Type Description
RenderFragmentGets 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.

Startlink

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
public RenderFragment Start { get; set; }
Property Value
Type Description
RenderFragmentGets 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.

Textlink

Gets or sets the label text.

Declaration
public string Text { get; set; }
Property Value
Type Description
stringGets or sets the label text.

TextTemplatelink

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
public RenderFragment TextTemplate { get; set; }
Property Value
Type Description
RenderFragmentGets 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.

Variantlink

Gets or sets the design variant of the form field.

Declaration
public Variant Variant { get; set; }
Property Value
Type Description
VariantGets or sets the design variant of the form field.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

OnParametersSetlink

Declaration
protected override void OnParametersSet()
An error has occurred. This app may no longer respond until reloaded. Reload 🗙