// Program.cs builder.Services.AddFormCraft();

public class UserRegistration { public string FirstName { get; set; } public string LastName { get; set; } public string Email { get; set; } public int Age { get; set; } public string Country { get; set; } public bool AcceptTerms { get; set; } }

@page "/register" @using FormCraft @using FormCraft.ForMudBlazor <h3>User Registration</h3> <FormCraftComponent TModel="UserRegistration" Model="@model" Configuration="@formConfig" OnValidSubmit="@HandleSubmit" ShowSubmitButton="true" /> @code { private UserRegistration model = new(); private IFormConfiguration<UserRegistration> formConfig; protected override void OnInitialized() { formConfig = FormBuilder<UserRegistration>.Create() .AddRequiredTextField(x => x.FirstName, "First Name") .AddRequiredTextField(x => x.LastName, "Last Name") .AddEmailField(x => x.Email) .AddNumericField(x => x.Age, "Age", min: 18, max: 120) .AddSelectField(x => x.Country, "Country", GetCountries()) .AddCheckboxField(x => x.AcceptTerms, "I accept the terms and conditions") .IsRequired("You must accept the terms") .Build(); } private async Task HandleSubmit(UserRegistration model) { // Handle form submission await UserService.RegisterAsync(model); } private List<SelectOption<string>> GetCountries() => new() { new("us", "United States"), new("uk", "United Kingdom"), new("ca", "Canada"), new("au", "Australia") }; }

public class UserRegistration { [TextField("First Name", "Enter your first name")] [Required(ErrorMessage = "First name is required")] [MinLength(2)] public string FirstName { get; set; } = string.Empty; [TextField("Last Name", "Enter your last name")] [Required(ErrorMessage = "Last name is required")] public string LastName { get; set; } = string.Empty; [EmailField("Email Address")] [Required] public string Email { get; set; } = string.Empty; [NumberField("Age", "Your age")] [Range(18, 120, ErrorMessage = "Age must be between 18 and 120")] public int Age { get; set; } [DateField("Date of Birth")] public DateTime BirthDate { get; set; } [SelectField("Country", "United States", "Canada", "United Kingdom", "Australia")] public string Country { get; set; } = string.Empty; [TextArea("Bio", "Tell us about yourself")] [MaxLength(500)] public string Bio { get; set; } = string.Empty; [CheckboxField("Newsletter", "Subscribe to our newsletter")] public bool SubscribeToNewsletter { get; set; } }

var formConfig = FormBuilder<UserRegistration>.Create() .AddFieldsFromAttributes() // That's it! 🎉 .Build();

var formConfig = FormBuilder<OrderForm>.Create() .AddSelectField(x => x.ProductType, "Product Type", productOptions) .AddSelectField(x => x.ProductModel, "Model", dependsOn: x => x.ProductType, optionsProvider: (productType) => GetModelsForType(productType)) .AddNumericField(x => x.Quantity, "Quantity", min: 1) .AddField(x => x.TotalPrice, "Total Price") .IsReadOnly() .DependsOn(x => x.ProductModel, x => x.Quantity) .WithValueProvider((model, _) => CalculatePrice(model)) .Build();

.AddField(x => x.Username) .WithValidator(new CustomValidator<User, string>( username => !forbiddenUsernames.Contains(username.ToLower()), "This username is not available")) .WithAsyncValidator(async (username, services) => { var userService = services.GetRequiredService<IUserService>(); return await userService.IsUsernameAvailableAsync(username); }, "Username is already taken")

// Vertical Layout (default) .WithLayout(FormLayout.Vertical) // Horizontal Layout .WithLayout(FormLayout.Horizontal) // Grid Layout .WithLayout(FormLayout.Grid, columns: 2) // Inline Layout .WithLayout(FormLayout.Inline)

// Password field with confirmation .AddPasswordField(x => x.Password, "Password") .WithHelpText("Must be at least 8 characters") .AddPasswordField(x => x.ConfirmPassword, "Confirm Password") .MustMatch(x => x.Password, "Passwords do not match") // Date picker with constraints .AddDateField(x => x.BirthDate, "Date of Birth") .WithMaxDate(DateTime.Today.AddYears(-18)) .WithHelpText("Must be 18 or older") // Multi-line text with character limit .AddTextAreaField(x => x.Description, "Description", rows: 5) .WithMaxLength(500) .WithHelpText("Maximum 500 characters") // File upload .AddFileUploadField(x => x.Resume, "Upload Resume", acceptedFileTypes: new[] { ".pdf", ".doc", ".docx" }, maxFileSize: 5 * 1024 * 1024) // 5MB // Multiple file upload .AddMultipleFileUploadField(x => x.Documents, "Upload Documents", maxFiles: 3, acceptedFileTypes: new[] { ".pdf", ".jpg", ".png" }, maxFileSize: 10 * 1024 * 1024) // 10MB per file

.AddField(x => x.CompanyName) .VisibleWhen(model => model.UserType == UserType.Business) .AddField(x => x.TaxId) .RequiredWhen(model => model.Country == "US")

var formConfig = FormBuilder<UserModel> .Create() .AddFieldGroup(group => group .WithGroupName("Personal Information") .WithColumns(2) // Two-column layout .ShowInCard(2) // Show in card with elevation 2 .AddField(x => x.FirstName, field => field .WithLabel("First Name") .Required()) .AddField(x => x.LastName, field => field .WithLabel("Last Name") .Required()) .AddField(x => x.DateOfBirth)) .AddFieldGroup(group => group .WithGroupName("Contact Information") .WithColumns(3) // Three-column layout .ShowInCard() // Default elevation 1 .AddField(x => x.Email) .AddField(x => x.Phone) .AddField(x => x.Address)) .Build();

var formConfig = FormBuilder<SecureForm>.Create() .WithSecurity(security => security .EncryptField(x => x.SSN) // Encrypt sensitive fields .EncryptField(x => x.CreditCard) .EnableCsrfProtection() // Enable anti-forgery tokens .WithRateLimit(5, TimeSpan.FromMinutes(1)) // Max 5 submissions per minute .EnableAuditLogging()) // Log all form interactions .AddField(x => x.SSN, field => field .WithLabel("Social Security Number") .WithMask("000-00-0000")) .AddField(x => x.CreditCard, field => field .WithLabel("Credit Card") .WithMask("0000 0000 0000 0000")) .Build();

// Create a custom renderer public class ColorPickerRenderer : CustomFieldRendererBase<string> { public override RenderFragment Render(IFieldRenderContext context) { return builder => { var value = GetValue(context) ?? "#000000"; builder.OpenElement(0, "input"); builder.AddAttribute(1, "type", "color"); builder.AddAttribute(2, "value", value); builder.AddAttribute(3, "onchange", EventCallback.Factory.CreateBinder<string>( this, async (newValue) => await SetValue(context, newValue), value)); builder.CloseElement(); }; } } // Use in your form configuration .AddField(x => x.Color, field => field .WithLabel("Product Color") .WithCustomRenderer<ProductModel, string, ColorPickerRenderer>() .WithHelpText("Select the primary color")) // Register custom renderers (optional for DI) services.AddScoped<ColorPickerRenderer>(); services.AddScoped<RatingRenderer>();