Form components

Input controls

Most of the basic input types are available as a standalone components.

• Text
• Memo
• Select
• Date
• Check & Radio

For future reference: While most of the input controls are named with *Edit suffix, this will likely be changed in the future(v1.0). The reason is that Razor & VS doesn’t allow for Blazor components to be named as regular html tags, see #5550

Containers

Containers are used to properly style input controls and also to keep the right spacing between controls.

• Field
• Addon

Usage

Using input controls is the same for all input types, the only difference is that value attributes will be named accordingly to the input type eg. (Text for TextEdit, Date for DateEdit, etc.)

The following is the example for TextEdit:

Events

To use event you must provide both Text value attribute and TextChanged event function.

<TextEdit Text="@name" TextChanged="@OnNameChanged" />

@code{
    string name;

    void OnNameChanged( string value )
    {
        name = value;
    }
}

Binding

Blazorise also supports automatic binding via bind-* attribute to keep it all much simpler.

<TextEdit @bind-Text="@name" />

@code{
    string name;
}

If you want to learn more about binding please go to the official Blazor site.