Form Builder

The most feature-complete form builder in the Blazor ecosystem. 21 field types, schema-driven or model-driven rendering, wizard forms, and cross-field validation.

Three Ways to Build Forms

1. Schema-Driven

var schema = new FormSchema
{
    Title = "Contact Form",
    Fields = new()
    {
        new() { Name = "name", Type = FieldType.Text,
                Label = "Full Name", Required = true },
        new() { Name = "email", Type = FieldType.Text,
                Label = "Email",
                Validation = new() { Pattern = "email" } },
    }
};
<HelixFormBuilder Schema="@schema" OnValidSubmit="HandleSubmit" />

2. Model-Driven

public class ContactForm
{
    [Required, StringLength(100)]
    [HelixField(Placeholder = "John Doe")]
    public string Name { get; set; }

    [Required, EmailAddress]
    public string Email { get; set; }
}

var schema = ModelFormGenerator.Generate<ContactForm>();

3. Component-Based

<TextField Label="Name" @bind-Value="model.Name" Required />
<NumberField Label="Age" @bind-Value="model.Age" Min="0" />
<SelectField Label="Role" @bind-Value="model.Role" Options="@roles" />

21 Field Types

FieldComponentValue Type
TextTextFieldstring
NumberNumberFielddouble?
TextAreaTextAreaFieldstring
SelectSelectFieldstring
Multi-SelectMultiSelectFieldList<string>
CheckboxCheckboxFieldbool
Checkbox GroupCheckboxGroupFieldList<string>
Radio GroupRadioGroupFieldstring
DateDateFieldDateTime?
TimeTimeFieldTimeSpan?
Date RangeDateRangeFieldDateTime? x2
SwitchSwitchFieldbool
SliderSliderFielddouble
ColorColorFieldstring
PasswordPasswordFieldstring
MaskedMaskedFieldstring
FileFileFieldIBrowserFile
AutocompleteAutocompleteFieldstring
RatingRatingFieldint
HiddenHiddenFieldstring
RepeaterRepeaterFieldList<Dictionary>

Validation

Three approaches, composable together:

  • Built-in — Required, MinLength, MaxLength, Min, Max, Pattern
  • Cross-field — MustEqual, MustBeAfter, AtLeastOneRequired
  • Custom — Implement IFieldValidator or IAsyncFieldValidator

Live Demo

Form Builder Demo Open in new tab ↗
Loading Blazor demo...