Discovering Blazor’s built-in input components

We have a developed our first form using HTML input elements, and everything went well, but Blazor has its own set of input components that give us better control and more features. In this section, we will discover those components and upgrade our form to be more efficient.

The built-in input components automatically update the CSS class of the input based on the validation state, so we can easily apply styles for the invalid elements. We will have a closer look at that in the next section.

So, let’s deep-dive into our components.

InputText

The first input component to visit is InputText. This gets rendered into the <input type="text" /> HTML element. Going back to our form from the previous section, we will upgrade the input of Title and the input of Author to use the InputText component, as shown here:

...<div class="form-group mt-1">
      &...