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
1
2
@inherits QuickForm<TEntity>// (1)!
@typeparam TEntity where TEntity : class, new()// (2)!
  1. The @inherits directive is used to specify the base class for this component.
  2. The @typeparam directive is used to specify that the component will be generic and work with any type.

Create the layouts

AppForm.razor - setting parameters and field layouts
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@{
    // 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 =>// (1)!
        @<div class="flex flex-col">
            <label for="@context.EditorId">// (2)!
                @context.DisplayName// (3)!
            </label>

            @context.InputComponent("peer")// (4)!

            <span class="text-gray-500">
                @context.Description// (5)!
            </span>

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

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

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

  1. The markup inside the ChildContent fragment, will be applied to individual fields. The @context object is used to access the field's metadata and the input component. It is an IQuickFormField object.

  2. @context.EditorId is a string, which holds the id of the input field. This can be used to associate the label with the input field. It is automatically generated.

  3. @context.DisplayName is a string, which holds the display name for the field. This can be set using the [DisplayName] or [Display(Name = ...)] attribute.

  4. @context.InputComponent is a RenderFragment<string> that renders the input field.
    The string parameter for this RenderFragment is the CSS class to be applied to the input field.

  5. @context.Description is a string, which holds the description for the field. This can be set using the [Description] or [Display(Description = ...)] attribute.

  6. @context.ValidFeedback is a string, which holds the valid feedback for the field. This can be set using the [ValidFeedback] attribute.

  7. Just like the @context.InputComponent, @context.ValidationMessages is also a RenderFragment<string> that renders the validation messages.
    The string parameter for this RenderFragment is the CSS class to be applied to the container element containing validation messages.

@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
37
38
39
@{
    base.BuildRenderTree(__builder); // (1)!
}
  1. This line is used to call your custom component's base class's - QuickForm's BuildRenderTree method.

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!