Nos artigos anteriores falamos bastante sobre o EditForm e seus processos de validação. Nos exemplos feitos até agora, utilizamos o componente InputText para criar inputs para exibir/receber textos simples.
Mas como sabemos, nem só de textos é feito um Formulário. Nesse artigo vamos elencar todos os componentes de Input que podemos utilizar nos Formulários do Blazor.
Por que precisamos de componentes de Inputs?
Antes de listarmos todos os possíveis inputs nativos do Blazor, é importante esclarecer uma coisa. Por que precisamos usar esses componentes? Não dá para simplesmente usar os elementos HTML que fazem essas operações?
A resposta é não. Nós precisamos desses componentes do Blazor para que o processo de validação do EditForm funcione corretamente. Os componentes de Input do Blazor disparam o processo de validação do formulário quando eles são modificados pelo usuário.
Por isso devemos utilizá-los no lugar dos elementos HTML respectivos de cada um. Vamos agora ver quais são os componentes de Input nativos do Blazor.
<InputText>
Esse já é nosso conhecido, e quando o utilizamos, o HTML renderizado será um simples elemento <input>.
Ele serve basicamente para capturar/exibir textos simples. Veja um exemplo da sua utilização na Figura 1.
Nesse exemplo você pode ver um DataBinding feito através do parâmetro bind-Value. Esse é um parâmetro comum em todos os Inputs nativos do Blazor.
<InputTextArea>
O componente <InputTextArea> é utilizado para renderizar o elemento HTML <textarea>. Como você deve saber, esse elemento é usado para capturar/exibir grandes textos, que podem conter quebras de linha.
O InputTextArea funciona exatamente como o InputText, veja a Figura 2.
<InputSelect>
O componente <InputSelect> deve ser utilizado para renderizar o elemento <select>, utilizado quando precisamos de um DropDownList. Veja como implementá-lo na Figura 3.
<InputNumber>
O <InputNumber> é utilizado para renderizar um input HTML do tipo numérico: <input type=”number”>. Esse componente, como o próprio nome diz, é usado para capturar/exibir valores numéricos. Veja na Figura 4.
<InputCheckbox>
Para renderizar um <input type=”checkbox”> devemos utilizar o componente <InputCheckbox>. Nesse componente o bind deve ser feito com uma propriedade do tipo bool do modelo. Confira na Figura 5.
<InputDate>
E para finalizar temos o <InputDate>, que deve ser usado para renderizar o elemento HTML <input type=”date”>. Esse componente deve ser usado para capturar/exibir datas. Veja como usá-lo na Figura 6.
Concluindo
Como vimos, com esses componentes Input nativos do Blazor, cobrimos os principais tipos de inputs que precisamos ter em nossos formulários.
Grande Abraço e até o próximo!
Blaze of Code 
Um comentário em “Inputs do EditForm no Blazor”