Blazorise Check component

Check allow the user to toggle an option on or off.

The <Check> component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists. You can use this to supply a way for the user to toggle an option.

Check

Simple card 
<Check TValue="bool">Check me out</Check>

With name

This example showcases two Blazorise checkboxes linked to the same identifier, CheckMeOut. Both checkboxes contribute to the same data field upon submission when included in a form. This setup is ideal for grouping related choices under one name but requires careful data handling to distinguish between the choices on the server side. 
<Check TValue="bool" Name="@name">Check me out</Check>
<Check TValue="bool" Name="@name">Check me out too!</Check>

@code{
    string name = "CheckMeOut";
}

Usage

With bind attribute

<Check TValue="bool" @bind-Checked="@rememberMe">Remember Me</Check>

@code{
    bool rememberMe;
}

With event

<Check TValue="bool" Checked="@rememberMe" CheckedChanged="@OnRememberMeChanged">Remember Me</Check>

@code{
    bool rememberMe;

    void OnRememberMeChanged( bool value )
    {
        rememberMe = value;
    }
}

API

Attributes

Name Description TypeDefault
TValue Data type of Checked value. Support types are bool and bool?. generic
Checked Gets or sets the checked flag. TValuedefault
CheckedChanged Occurs when the check state is changed. EventCallback<TValue>
Indeterminate The indeterminate property can help you to achieve a ‘check all’ effect. bool?null
Inline Group checkboxes on the same horizontal row. boolfalse
Cursor Defines the mouse cursor based on the behavior by the current CSS framework. CursorDefault
Name Defines the name attribute of a checkbox. The name attribute is used to identify form data after it has been submitted to the server, or to reference form data using JavaScript on the client side. CursorDefault
On this page