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 me out

<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 me out

Check me out too!

<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

Remember Me

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

@code{
    bool rememberMe;
}

With event

Remember Me

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

@code{
    bool rememberMe;

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

Indeterminate

Use Indeterminate when a parent checkbox represents a partial selection.

Select all

Documentation

Examples

Tests

@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 );
        }
    }
}

API

Parameters

Parameter	Description	Type	Default
`AriaDescribedBy`	Specifies the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Specifies the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Specifies the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Specifies the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this Check.	`RenderFragment`	`null`
`Cursor`	Specifies the mouse cursor based on the behaviour by the current css framework. Possible values:`Default`, `Pointer`	`Cursor`	`Cursor.Default`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Indeterminate`	The indeterminate property can help you to achieve a 'check all' effect.	`bool?`	`null`
`Inline`	Group checkboxes or radios on the same horizontal row.	`bool`	`false`
`Name`	Specifies the name attribute of a checkbox. Remarks 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.	`string`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`Size`	Sets the size of the input control.	`Size?`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Specifies the value inside the input field.	`TValue`	`null`
`ValueExpression`	Specifies an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Events

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Notifies when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Notifies when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Notifies when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Notifies when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Notifies when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Notifies when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Methods

Method	Description	Return	Parameters
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`