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.

Examples

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-Value="@rememberMe">Remember Me</Check>

@code{
    bool rememberMe;
}

With event

<Check TValue="bool" Value="@rememberMe" ValueChanged="@OnRememberMeChanged">Remember Me</Check>

@code{
    bool rememberMe;

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

IndeterminateNew

Use Indeterminate when a parent checkbox represents a partial selection. 
@using System.Collections.Generic

<Check TValue="bool" Value="@AreAllSelected" Indeterminate="@AreSomeSelected" ValueChanged="@OnSelectAllChanged">
    Select all
</Check>

<Div Display="Display.Flex" Flex="Flex.Column" Gap="Gap.Is2" Margin="Margin.Is3.FromTop">
    @foreach ( string item in Items )
    {
        <Check TValue="bool" Value="@selectedItems.Contains( item )" ValueChanged="@(( bool value ) => OnItemChanged( item, value ))">
            @item
        </Check>
    }
</Div>

@code {
    private static readonly string[] Items =
    [
        "Documentation",
        "Examples",
        "Tests"
    ];

    private readonly HashSet<string> selectedItems = new() { "Documentation" };

    private bool AreAllSelected => selectedItems.Count == Items.Length;

    private bool AreSomeSelected => selectedItems.Count > 0 && !AreAllSelected;

    private void OnSelectAllChanged( bool value )
    {
        selectedItems.Clear();

        if ( value )
        {
            foreach ( string item in Items )
            {
                selectedItems.Add( item );
            }
        }
    }

    private void OnItemChanged( string item, bool value )
    {
        if ( value )
        {
            selectedItems.Add( item );
        }
        else
        {
            selectedItems.Remove( item );
        }
    }
}

Best Practices

Write Positive Labels

Use a short label that describes the selected state, such as "Send me updates" instead of a negative statement. When checks form a related set, introduce them with a visible question or legend while retaining a clear label for every option.

Selection Control

The indeterminate state should summarize a mixed group of child values rather than act as a third submitted choice. When users must choose exactly one mutually exclusive option, use a RadioGroup instead.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page