Checkbox

BitCheckbox is a component that permits the user to make a binary choice, a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' or 'no' on a simple yes/no question. Checkboxes by default are shown as ☐ when unchecked and ☑ when checked.

Usage

Basic

Basic usage of BitCheckbox with enabled and disabled states.

Basic checkbox

Disable checkbox

Disable checked checkbox

<BitCheckbox Label="Basic checkbox" />
<BitCheckbox Label="Disable checkbox" IsEnabled="false" />
<BitCheckbox Label="Disable checked checkbox" IsEnabled="false" Value="true" />

Check icon

Customize the check icon of BitCheckbox.

Custom check icon

Disabled custom check icon

<BitCheckbox Label="Custom check icon" CheckIconName="@BitIconName.Heart" />
<BitCheckbox Label="Disabled custom check icon" CheckIconName="@BitIconName.WavingHand" Value="true" IsEnabled="false" />

Reversed

Adjust the label position of BitCheckbox to be reversed.

Reversed

Reversed - Disabled

Reversed - Disable Checked

<BitCheckbox Label="Reversed" Reversed />
<BitCheckbox Label="Reversed - Disabled" Reversed IsEnabled="false" />
<BitCheckbox Label="Reversed - Disable Checked" Reversed IsEnabled="false" Value="true" />

LabelTemplate

Customizing the label of BitCheckbox using a template.

Label Template

<BitCheckbox>
    <LabelTemplate>
        <BitTag Color="BitColor.Success">Label Template</BitTag>
    </LabelTemplate>
</BitCheckbox>

Indeterminate

Display BitCheckbox in an indeterminate state.

Indeterminate checkbox

Disabled indeterminate checkbox

<BitCheckbox Label="Indeterminate checkbox" Indeterminate />
<BitCheckbox Label="Disabled indeterminate checkbox" Indeterminate IsEnabled="false" />

Binding

Demonstrates one-way and two-way data binding with BitCheckbox.

Value:

One-way checked (Fixed)

One-way

Two-way controlled checkbox

Indeterminate:

One-way indeterminate (Fixed)

One-way indeterminate

Two-way indeterminate

<BitCheckbox Label="One-way checked (Fixed)" Value="true" />

<BitCheckbox Label="One-way" Value="oneWayValue" />
<BitToggleButton @bind-IsChecked="oneWayValue" Text="Toggle" />

<BitCheckbox Label="Two-way controlled checkbox" @bind-Value="twoWayValue" />
<BitToggleButton @bind-IsChecked="twoWayValue" Text="Toggle" />


<BitCheckbox Label="One-way indeterminate (Fixed)" Indeterminate />

<BitCheckbox Label="One-way indeterminate" Indeterminate="oneWayIndeterminate" />
<BitToggleButton @bind-IsChecked="oneWayIndeterminate" Text="Toggle" />

<BitCheckbox Label="Two-way indeterminate" @bind-Indeterminate="twoWayIndeterminate" />
<BitToggleButton @bind-IsChecked="twoWayIndeterminate" Text="Toggle" />
@code {
    private bool oneWayValue;
    private bool twoWayValue;
    private bool oneWayIndeterminate = true;
    private bool twoWayIndeterminate = true;
}

Validation

Use data annotations to validate the BitCheckbox component.

<style>
    .validation-message {
        color: red;
        font-size: 0.75rem;
    }
</style>

<EditForm Model="validationModel"
          OnValidSubmit="HandleValidSubmit"
          OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />
    <BitCheckbox Label="I agree with the terms and conditions."
                 @bind-Value="validationModel.TermsAgreement" />
    <ValidationMessage For="@(() => validationModel.TermsAgreement)" />

    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    private BitCheckboxValidationModel validationModel = new();
    
    public class BitCheckboxValidationModel
    {
        [Range(typeof(bool), "true", "true", ErrorMessage = "You must agree to the terms and conditions.")]
        public bool TermsAgreement { get; set; }
    }
    
    private async Task HandleValidSubmit() { }
    
    private void HandleInvalidSubmit() { }
}

Custom content

Create a custom checkbox with unique content and style.

Custom basic checkbox

Custom indeterminate checkbox

<BitCheckbox @bind-Value="customCheckboxValue">
    <BitIcon Style="border:1px solid gray;width:22px;height:22px"
             IconName="@(customCheckboxValue ? BitIconName.Accept : null)" />
    <span>Custom basic checkbox</span>
</BitCheckbox>


<BitCheckbox @bind-Value="customContentValue" @bind-Indeterminate="customContentIndeterminate">
    <BitIcon Style="border:1px solid gray;width:22px;height:22px"
             IconName="@(customContentIndeterminate ? BitIconName.Fingerprint : (customContentValue ? BitIconName.Accept : null))" />
    <span>Custom indeterminate checkbox</span>
</BitCheckbox>
<BitButton OnClick="() => customContentIndeterminate = true">Make Indeterminate</BitButton>
@code {
    private bool customCheckboxValue;
    private bool customContentValue;
    private bool customContentIndeterminate = true;
}

Size

Varying sizes for checkboxes tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.

Small:

Checkbox

Medium:

Checkbox

Large:

Checkbox

<BitCheckbox Size="BitSize.Small" Label="Checkbox" />
<BitCheckbox Size="BitSize.Small" Label="Checkbox" Indeterminate />
<BitCheckbox Size="BitSize.Small" Label="Checkbox" Value />
                
<BitCheckbox Size="BitSize.Medium" Label="Checkbox" />
<BitCheckbox Size="BitSize.Medium" Label="Checkbox" Indeterminate />
<BitCheckbox Size="BitSize.Medium" Label="Checkbox" Value />
                
<BitCheckbox Size="BitSize.Large" Label="Checkbox" />
<BitCheckbox Size="BitSize.Large" Label="Checkbox" Indeterminate />
<BitCheckbox Size="BitSize.Large" Label="Checkbox" Value />

Color

<BitCheckbox Color="BitColor.Primary" Label="Primary" />
<BitCheckbox Color="BitColor.Primary" Label="Primary" Indeterminate />
<BitCheckbox Color="BitColor.Primary" Label="Primary" Value />
                
<BitCheckbox Color="BitColor.Secondary" Label="Secondary" />
<BitCheckbox Color="BitColor.Secondary" Label="Secondary" Indeterminate />
<BitCheckbox Color="BitColor.Secondary" Label="Secondary" Value />
                
<BitCheckbox Color="BitColor.Tertiary" Label="Tertiary" />
<BitCheckbox Color="BitColor.Tertiary" Label="Tertiary" Indeterminate />
<BitCheckbox Color="BitColor.Tertiary" Label="Tertiary" Value />
                
<BitCheckbox Color="BitColor.Info" Label="Info" />
<BitCheckbox Color="BitColor.Info" Label="Info" Indeterminate />
<BitCheckbox Color="BitColor.Info" Label="Info" Value />
                
<BitCheckbox Color="BitColor.Success" Label="Success" />
<BitCheckbox Color="BitColor.Success" Label="Success" Indeterminate />
<BitCheckbox Color="BitColor.Success" Label="Success" Value />
               
<BitCheckbox Color="BitColor.Warning" Label="Warning" />
<BitCheckbox Color="BitColor.Warning" Label="Warning" Indeterminate />
<BitCheckbox Color="BitColor.Warning" Label="Warning" Value />
                
<BitCheckbox Color="BitColor.SevereWarning" Label="SevereWarning" />
<BitCheckbox Color="BitColor.SevereWarning" Label="SevereWarning" Indeterminate />
<BitCheckbox Color="BitColor.SevereWarning" Label="SevereWarning" Value />
                
<BitCheckbox Color="BitColor.Error" Label="Error" />
<BitCheckbox Color="BitColor.Error" Label="Error" Indeterminate />
<BitCheckbox Color="BitColor.Error" Label="Error" Value />
                
<BitCheckbox Color="BitColor.PrimaryBackground" Label="PrimaryBackground" />
<BitCheckbox Color="BitColor.PrimaryBackground" Label="PrimaryBackground" Indeterminate />
<BitCheckbox Color="BitColor.PrimaryBackground" Label="PrimaryBackground" Value />
                    
<BitCheckbox Color="BitColor.SecondaryBackground" Label="SecondaryBackground" />
<BitCheckbox Color="BitColor.SecondaryBackground" Label="SecondaryBackground" Indeterminate />
<BitCheckbox Color="BitColor.SecondaryBackground" Label="SecondaryBackground" Value />
                    
<BitCheckbox Color="BitColor.TertiaryBackground" Label="TertiaryBackground" />
<BitCheckbox Color="BitColor.TertiaryBackground" Label="TertiaryBackground" Indeterminate />
<BitCheckbox Color="BitColor.TertiaryBackground" Label="TertiaryBackground" Value />
                    
<BitCheckbox Color="BitColor.PrimaryForeground" Label="PrimaryForeground" />
<BitCheckbox Color="BitColor.PrimaryForeground" Label="PrimaryForeground" Indeterminate />
<BitCheckbox Color="BitColor.PrimaryForeground" Label="PrimaryForeground" Value />
                    
<BitCheckbox Color="BitColor.SecondaryForeground" Label="SecondaryForeground" />
<BitCheckbox Color="BitColor.SecondaryForeground" Label="SecondaryForeground" Indeterminate />
<BitCheckbox Color="BitColor.SecondaryForeground" Label="SecondaryForeground" Value />
                    
<BitCheckbox Color="BitColor.TertiaryForeground" Label="TertiaryForeground" />
<BitCheckbox Color="BitColor.TertiaryForeground" Label="TertiaryForeground" Indeterminate />
<BitCheckbox Color="BitColor.TertiaryForeground" Label="TertiaryForeground" Value />
                    
<BitCheckbox Color="BitColor.PrimaryBorder" Label="PrimaryBorder" />
<BitCheckbox Color="BitColor.PrimaryBorder" Label="PrimaryBorder" Indeterminate />
<BitCheckbox Color="BitColor.PrimaryBorder" Label="PrimaryBorder" Value />
                    
<BitCheckbox Color="BitColor.SecondaryBorder" Label="SecondaryBorder" />
<BitCheckbox Color="BitColor.SecondaryBorder" Label="SecondaryBorder" Indeterminate />
<BitCheckbox Color="BitColor.SecondaryBorder" Label="SecondaryBorder" Value />
                    
<BitCheckbox Color="BitColor.TertiaryBorder" Label="TertiaryBorder" />
<BitCheckbox Color="BitColor.TertiaryBorder" Label="TertiaryBorder" Indeterminate />
<BitCheckbox Color="BitColor.TertiaryBorder" Label="TertiaryBorder" Value />

External Icons

Use icons from external libraries like FontAwesome and Bootstrap Icons with the CheckIcon parameter.

FontAwesome:

House (CheckIcon string)

Heart (BitIconInfo.Css)

Rocket (BitIconInfo.Fa)

Bootstrap Icons:

House (CheckIcon string)

Heart (BitIconInfo.Css)

Gear (BitIconInfo.Bi)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitCheckbox Label="House (CheckIcon string)" CheckIcon="@("fa-solid fa-house")" />

<BitCheckbox Label="Heart (BitIconInfo.Css)" CheckIcon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Secondary" />

<BitCheckbox Label="Rocket (BitIconInfo.Fa)" CheckIcon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Error" />


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitCheckbox Label="House (CheckIcon string)" CheckIcon="@("bi bi-house-fill")" />

<BitCheckbox Label="Heart (BitIconInfo.Css)" CheckIcon="@BitIconInfo.Css("bi bi-heart-fill")" Color="BitColor.Secondary" />

<BitCheckbox Label="Gear (BitIconInfo.Bi)" CheckIcon="@BitIconInfo.Bi("gear-fill")" Color="BitColor.Error" />

Style & Class

Explore styling and class customization for BitCheckbox, including component styles, custom classes, and detailed styles.

Component's Style & Class:

Styled checkbox

Classed checkbox

Styles & Classes:

Styles

Classes

<style>
    .custom-class {
        padding: 0.5rem;
        border-radius: 0.125rem;
        background-color: #d3d3d347;
        border: 1px solid dodgerblue;
    }


    .custom-label {
        font-weight: bold;
        color: lightseagreen;
    }

    .custom-icon {
        color: lightseagreen
    }

    .custom-box {
        border-radius: 0.2rem;
        border-color: lightseagreen;
    }

    .custom-checked .custom-icon {
        color: white
    }

    .custom-checked:hover .custom-icon {
        color: whitesmoke;
    }

    .custom-checked .custom-box {
        background-color: lightseagreen;
    }

    .custom-checked:hover .custom-box {
        border-color: mediumseagreen;
    }
</style>


<BitCheckbox Label="Styled checkbox" Style="color: dodgerblue; text-shadow: lightskyblue 0 0 1rem;" />

<BitCheckbox Label="Classed checkbox" Class="custom-class" />


<BitCheckbox Label="Styles" 
             Styles="@(new() { Checked = "--check-color: deeppink; --icon-color: white;", 
                               Label = "color: var(--check-color);",
                               Box = "border-radius: 50%; border-color: var(--check-color); background-color: var(--check-color);",
                               Icon = "color: var(--icon-color);" })" />

<BitCheckbox Label="Classes" 
             Classes="@(new() { Checked = "custom-checked",
                                Icon = "custom-icon",
                                Label="custom-label",
                                Box="custom-box" })" />

RTL

Use BitCheckbox in right-to-left (RTL).

چکباکس راست به چپ

چکباکس غیرفعال

چکباکس غیرفعال چک شده

<BitCheckbox Dir="BitDir.Rtl" Label="چکباکس راست به چپ" />
<BitCheckbox Dir="BitDir.Rtl" Label="چکباکس غیرفعال" IsEnabled="false" />
<BitCheckbox Dir="BitDir.Rtl" Label="چکباکس غیرفعال چک شده" IsEnabled="false" Value="true" />

API

BitCheckbox parameters

Name	Type	Default value	Description
AriaDescription	string?	null	Detailed description of the checkbox for the benefit of screen readers.
AriaLabelledby	string?	null	ID for element that contains label information for the checkbox.
AriaPositionInSet	int?	null	The position in the parent set (if in a set) for aria-posinset.
AriaSetSize	int?	null	The total size of the parent set (if in a set) for aria-setsize.
CheckIcon	BitIconInfo?	null	The check icon using custom CSS classes for external icon libraries. Takes precedence over CheckIconName when both are set. Use BitIconInfo.Bi(), BitIconInfo.Fa(), or BitIconInfo.Css() for Bootstrap Icons, FontAwesome, or custom CSS.
CheckIconName	string?	Accept	The name of the built-in icon to render as the check mark inside the checkbox.
CheckIconAriaLabel	string?	null	The aria label of the icon for the benefit of screen readers.
ChildContent	RenderFragment?	null	Used to customize the content of checkbox(Label and Box).
Classes	BitCheckboxClassStyles?	null	Custom CSS classes for different parts of the BitCheckbox.
Color	BitColor?	null	The general color of the checkbox.
DefaultIndeterminate	bool?	null	Default indeterminate visual state for checkbox.
DefaultValue	bool?	null	Use this if you want an uncontrolled component, meaning the Checkbox instance maintains its own state.
Indeterminate	bool	false	An indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked given but does not affect on Value state.
Label	string?	null	Descriptive label for the checkbox.
LabelTemplate	RenderFragment?	null	Used to customize the label for the checkbox.
Name	string?	null	Name for the checkbox input. This is intended for use with forms and NOT displayed in the UI.
OnClick	EventCallback<MouseEventArgs>		Callback for when the checkbox clicked.
Reversed	bool	false	Reverses the label and checkbox location.
Size	BitSize?	null	The size of the checkbox.
Styles	BitCheckboxClassStyles?	null	Custom CSS styles for different parts of the BitCheckbox.
Title	string?	null	Title text applied to the root element and the hidden checkbox input.

BitInputBase parameters

Name	Type	Default value	Description
DisplayName	string?	null	Gets or sets the display name for this field.
InputHtmlAttributes	IReadOnlyDictionary<string, object>?	null	Gets or sets a collection of additional attributes that will be applied to the created element.
Name	string?	null	Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate	bool	false	Disables the validation of the input.
OnChange	EventCallback<TValue?>		Callback for when the input value changes.
ReadOnly	bool	false	Makes the input read-only.
Required	bool	false	Makes the input required.
Value	TValue?	null	Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name	Type	Description
InputElement	ElementReference	The ElementReference of the input element.
FocusAsync()	() => ValueTask	Gives focus to the input element.
FocusAsync(bool preventScroll)	(bool preventScroll) => ValueTask	Gives focus to the input element.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitCheckboxClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitCheckBox.
Container	string?	null	Custom CSS classes/styles for the container of the BitCheckbox.
Checked	string?	null	Custom CSS classes/styles for the checked state of the BitCheckbox.
Box	string?	null	Custom CSS classes/styles for the box element of the BitCheckbox.
Icon	string?	null	Custom CSS classes/styles for the icon of the BitCheckbox.
Label	string?	null	Custom CSS classes/styles for the label of the BitCheckbox.

BitVariant enum

Name	Value	Description
Fill	0	Fill styled variant.
Outline	1	Outline styled variant.
Text	2	Text styled variant.

BitColor enum

Name	Value	Description
Primary	0	Info Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitSize enum

Name	Value	Description
Small	0	The small size checkbox.
Medium	1	The medium size checkbox.
Large	2	The large size checkbox.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

Checkbox

BitCheckbox is a component that permits the user to make a binary choice, a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' or 'no' on a simple yes/no question. Checkboxes by default are shown as ☐ when unchecked and ☑ when checked.

Usage

Basic

Check icon

Reversed

LabelTemplate

Indeterminate

Binding

Validation

Custom content

Size

Color

External Icons

Style & Class

RTL

API

BitCheckbox parameters

Name

Type

Default value

Description

BitInputBase parameters

Name

Type

Default value

Description

BitInputBase public members

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitCheckboxClassStyles properties

Name

Type

Default value

Description

BitVariant enum

Name

Value

Description

BitColor enum

Name

Value

Description

BitSize enum

Name

Value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.