Radzen Blazor Components

FormField

Radzen Blazor FormField component features a floating label effect. When the user focuses on an empty input field, the label floats above, providing a visual cue as to which field is being filled out. This can help improve the layout and overall user experience of your forms.

These demos showcase form fields with floating labels, multiple variants (Outlined/Flat/Filled/Text), support for various input types (TextBox/Password/DropDown), Start/End/ChildContent positioning, configurable floating label behavior, helper text, validation integration, and disabled states.

Variants link

The FormField can be easily customized to fit a wide range of form input needs. Set the Variant property to use Outlined, Flat, Filled, or Text variants.

Input types link

The FormField can be used to render different types of form input components, such as RadzenTextBox, RadzenPassword, RadzenDropDown and more.

Outlined
Around the Horn
Hex
R
G
B
A

Start, End, and ChildContent link

To render content before or after the input in a RadzenFormField, you need to add <Start> or <End> elements together with a <ChildContent> that contains the input component.

Outlined
account_circle
add_circle
credit_card

Floating Label link

By default, RadzenFormField has the floating label effect enabled. To disable it and always display the label fixed on top, use AllowFloatingLabel="false".

Helper text link

To display assistive content in a RadzenFormField, add <Helper> element after the <ChildContent>.

Outlined
credit_card
* required

Validation link

You can use validators inside a FormField.

Outlined

Console log

Disabled FormField link

To disable a FormField, just set the Disabled property of the input component to true.

Outlined
Around the Horn
All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙