Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Checkbox

Multiple-select in a set of alternatives

Basic usage

Using alone can represent a switch between two states, and column head or header can represent a switch between three states when used. Components support generic data binding, setting the binding data type the TValue, and setting the component state by State

Demo

Selected

Not selected

Indeterminate

@inject IStringLocalizer<CheckboxNormal> Localizer

<div class="row g-3 form-inline">
    <div class="col-12 col-sm-4">
        <Checkbox TValue="string" OnStateChanged="@OnStateChanged" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" State="CheckboxState.Checked" />
    </div>
    <div class="col-12 col-sm-4">
        <Checkbox TValue="string" OnStateChanged="@OnStateChanged" DisplayText="@Localizer["StatusText2"]" ShowLabel="true" State="CheckboxState.UnChecked" />
    </div>
    <div class="col-12 col-sm-4">
        <Checkbox TValue="string" OnStateChanged="@OnStateChanged" DisplayText="@Localizer["StatusText3"]" ShowLabel="true" State="CheckboxState.Indeterminate" />
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    private BlockLogger? Trace { get; set; }

    private Task OnStateChanged(CheckboxState state, string value)
    {
        Trace?.Log($"Checkbox state changed State: {state}");
        return Task.CompletedTask;
    }
}

Disable the check box

Check box is not available, and the IsDisabled is set by whether the component is available

Demo

StatusText1

StatusText2

@inject IStringLocalizer<CheckboxDisabled> Localizer

<div class="row g-3 form-inline">
    <div class="col-12 col-sm-4">
        <Checkbox TValue="string" IsDisabled="true" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" State="CheckboxState.Checked" />
    </div>
    <div class="col-12 col-sm-4">
        <Checkbox TValue="string" IsDisabled="true" DisplayText="@Localizer["StatusText2"]" ShowLabel="true" State="CheckboxState.UnChecked" />
    </div>
</div>

Color

Change the component background color by setting the Color property

Demo

@inject IStringLocalizer<CheckboxShowLabel> Localizer

<div class="row g-3 form-inline">
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Primary" />
    </div>
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Success" />
    </div>
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Danger" />
    </div>
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Info" />
    </div>
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Warning" />
    </div>
    <div class="col-12 col-md-4">
        <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="@Localizer["StatusText1"]" ShowLabel="true" Color="@Color.Dark" />
    </div>
</div>

Size

Change the component size by setting the Size property

Demo

<div class="row g-3 form-inline">
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="Default" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="Small" Size="Size.Small" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="Medium" Size="Size.Medium" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="Large" Size="Size.Large" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="ExtraLarge" Size="Size.ExtraLarge" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowLabel="true" DisplayText="ExtraExtraLarge" Size="Size.ExtraExtraLarge" />
    </div>
</div>

Label text

The check box displays text, and the component status flips when you tap display text, using the DisplayText settings component to display text

Demo

Set DisplayText property, or display text messages through bidirectional binding

<div class="row g-3 form-inline">
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="Default" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="Small" Size="Size.Small" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="Medium" Size="Size.Medium" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="Large" Size="Size.Large" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="ExtraLarge" Size="Size.ExtraLarge" />
    </div>
    <div class="col-12 col-md-3">
        <Checkbox TValue="string" State="CheckboxState.Checked" ShowAfterLabel="true" DisplayText="ExtraExtraLarge" Size="Size.ExtraExtraLarge" />
    </div>
</div>

Two-way binding boolean

Binding variables within a component, data automatically synchronized, binding data types boolean type when the value is automatically flipped

Demo

Checkbox2Text

@inject IStringLocalizer<CheckboxOnStateChanged> Localizer

<div class="row g-3 form-inline">
    <div class="col-12">
        <Checkbox TValue="bool" DisplayText="@Localizer["Checkbox2Text"]" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged" />
    </div>
    <div class="col-12">
        <BootstrapInput @bind-Value="@BindValue" IsDisabled="true" />
    </div>
</div>
<BlockLogger @ref="BinderLog" class="mt-3" />

@code {
    private bool BindValue { get; set; }

    private BlockLogger? BinderLog { get; set; }

    private Task OnItemChanged(CheckboxState state, bool value)
    {
        BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
        return Task.CompletedTask;
    }
}

Bind string data in both directions

Binding variables within a component, data is automatically synchronized

Demo

Checkbox2Text

@inject IStringLocalizer<CheckboxBindString> Localizer

<div class="row g-3 form-inline">
    <div class="col-12">
        <Checkbox TValue="string" DisplayText="@Localizer["Checkbox2Text"]" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString" />
    </div>
    <div class="col-12">
        <BootstrapInput @bind-Value="@BindString" />
    </div>
</div>
<BlockLogger @ref="BinderLog" class="mt-3" />

@code {
    private BlockLogger? BinderLog { get; set; }

    private string BindString { get; set; } = "我爱 Blazor";

    private Task OnItemChangedString(CheckboxState state, string value)
    {
        BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
        return Task.CompletedTask;
    }
}

Used in forms

When you use Checkbox in a form, the display label text is placed in front of the component

Demo

The pre-label explicit rules are consistent with the BootstrapInput component [portal]

@using System.ComponentModel
@inject IStringLocalizer<CheckboxValidateForm> Localizer

<ValidateForm Model="@Model">
    <div class="row g-3 form-inline">
        <div class="col-12 col-sm-6">
            <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6">
            <Checkbox @bind-Value="@Model.BindValue1" ShowLabel="true" DisplayText="@Localizer["Checkbox3Text"]" />
        </div>
    </div>
</ValidateForm>

@code {
    private Foo Model { get; set; } = new Foo();

    private class Foo
    {
        [DisplayName("标签文字1")]
        public bool BindValue { get; set; }

        [DisplayName("标签文字2")]
        public bool BindValue1 { get; set; }
    }
}

Attributes

Event

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Checkbox

Multiple-select in a set of alternatives

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01