BlazorFluentUI V5.6.1.0
View BlazorFluentUI GitHub repo

Checkbox

Overview

Check boxes (Checkbox) give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).

Usage

Basic Checkboxes
<Stack Tokens=stackTokens>
    <Checkbox Label="Unchecked checkbox (uncontrolled)" CheckedChanged=FirstChange />
    <Checkbox Label="Checked checkbox (uncontrolled)" DefaultChecked="true" CheckedChanged=FirstChange />
    <Checkbox Label="Disabled checkbox" Disabled="true" />
    <Checkbox Label="Disabled checked checkbox" Disabled="true" DefaultChecked="true" />
</Stack>
Other Implementation Examples
<Stack Tokens=stackTokens>
    <Label>Controlled checkbox is @(_isFirstChecked ? "checked" : "unchecked").</Label>
    <Checkbox Label="Controlled checkbox" @bind-Checked=@_isFirstChecked />
    <Checkbox Label='Checkbox rendered with boxSide "end"' BoxSide="BoxSide.End" />
    <Checkbox Label="Checkbox with link inside the label">
        <OnRenderLabel>
            <span>
Custom-rendered label with a link to <BlazorFluentUI.Link Href='https://www.microsoft.com' Target='_blank'>Microsoft home page</BlazorFluentUI.Link>
            </span>
        </OnRenderLabel>
    </Checkbox>
</Stack>
Indeterminate Checkboxes
<Stack Tokens=stackTokens>
    <Label>Indeterminate checkbox (controlled) is @(_isIndeterminate ? "indeterminate" : (_isSecondChecked ? "checked" : "unchecked" )).</Label>
    <Checkbox Label="Indeterminate checkbox (uncontrolled)" DefaultIndeterminate="true" />
    <Checkbox Label="Indeterminate checkbox which defaults to true when clicked (uncontrolled)" DefaultIndeterminate="true" DefaultChecked="true" />
    <Checkbox Label="Disabled indeterminate checkbox" Disabled="true" DefaultIndeterminate="true" />
    <Checkbox Label="Indeterminate checkbox (controlled)" @bind-Indeterminate=@_isIndeterminate @bind-Checked=@_isSecondChecked />
</Stack>
Blazor Forms Validation Example

<EditForm Model="exampleModel" OnValidSubmit=@HandleValidSubmit>
    <Stack Tokens=stackTokens>
        <DataAnnotationsValidator />
        <FluentUIValidationSummary />
        <Label>Do you agree with the terms?</Label>
        <Checkbox Label="I agree with the terms!" @bind-Checked=@(exampleModel.IsChecked) />
        <SubmitButton Text="Submit" />
    </Stack>
</EditForm>