Skip to content

Customization

While being effortless to use, QuickForm is flexible enough to support a wide variety of customization.

There are a few ways to customize QuickForm:


Custom layout

This is a step-by-step guide to creating a custom form styled with TailwindCSS.

Please note, that this process may seem a little complex for users who are not familiar with Blazor.


Define the directives

AppForm.razor - declaring directives
@inherits QuickForm<TEntity>
@typeparam TEntity where TEntity : class, new()

Create the layouts

AppForm.razor - setting parameters and field layouts
@{
    // Additional attributes, in this case, it is the class to be applied to the form.
    AdditionalAttributes ??= new Dictionary<string, object>();
    AdditionalAttributes.Add("class", "flex flex-col");

    // Field layout
    ChildContent = context =>
        @<div class="flex flex-col">
            <label for="@context.EditorId">
                @context.DisplayName
            </label>

            @context.InputComponent("peer")

            <span class="text-gray-500">
                @context.Description
            </span>

             <span class="hidden peer-[.valid]:block text-green-700">
                 @context.ValidFeedback
             </span>

            @context.ValidationMessages("hidden peer-[.invalid]:block text-red-700")
        </div>;

    // Submit button layout
    SubmitButtonTemplate =
        @<button type="submit" class="border border-green-500 text-green-500">
            submit
        </button>;
}

@context

See IQuickFormField interface for more information on the @context object and what fields are available to you.


Important! add the base component's markup

AppForm.razor - parent markup rendering
@{
    base.BuildRenderTree(__builder); 
}

Important

This is necessary to render the form and its fields. Without this line your form will not be rendered.


Congratulations!

You can now use your component all around your application!

Here is what the output should look like:

your custom form

As an exercise to get better with using the library, try creating a component for a different CSS framework, or even a custom one!