Home Docs

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.



Check icon
Customize the check icon of BitCheckbox.


Reversed
Adjust the label position of BitCheckbox to be reversed.



LabelTemplate
Customizing the label of BitCheckbox using a template.

Indeterminate
Display BitCheckbox in an indeterminate state.


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


Value:







Indeterminate:



Validation
Use data annotations to validate the BitCheckbox component.


Custom content
Create a custom checkbox with unique content and style.


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

Small:




Medium:




Large:

Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.


















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


Component's Style & Class:





Styles & Classes:


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



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.
CheckIconName string Accept Custom icon for the check mark rendered by the checkbox instead of default check mark icon.
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
Default value
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 The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
  • On this page